Chosen: optgroup 레이블을 클릭 가능하게 만들기

이것은 유용하지만 표준 html-select에서는 허용하지 않습니다.

@Fr3nzzy : 네, 하지만 선택사항이라면 문제가 되지

@Fr3nzzy : 내가 할 수 있다면 표준 html-select도 검색을 허용하지 않습니다 ... 그러나 매우 편리하고 이것이 Chosen이 훌륭한 이유입니다. 표준 선택을 향상시킵니다. 여기에도 같은 논리를 적용할 수 있을 것 같습니다.

@greg0ire : +1, 이것도 찾고 있어요 :o)

@pilap82 그러나 select는 이름을 입력하여 항목 찾기를 지원합니다.

그럴 수 있지 :)

패치를 위한 최적의 장소는 아니지만 도움이 되었으면 합니다.

$( '.chzn-results .group-result' ).each( function () {
    var self      = $( this )
        , options = $( '~li', self )
        , next    = options.filter( '.group-result' ).get( 0 )
    ;
    self.data( 'chzn-options', options.slice( 0, options.index( next ) ) );
} )
.click( function () { 
    $( this ).data( 'chzn-options' ).mouseup()
 } )
.hover( function () { 
    $( this ).data( 'chzn-options' ).addClass( 'highlighted' );
 }, function () { 
    $( this ).data( 'chzn-options' ).removeClass( 'highlighted' );
 } )
.css( { cursor: 'pointer' } );

이것은 좋은 생각입니다. 핵심 팀이 이를 병합할 수 있다면 풀 리퀘스트를 제출할 의향이 있습니다. @pfiller는 어떻게 생각하세요?

선택한 배치 선택 샘플:

http://vafada.github.com/chosen-dojo/

잘 했어요!

이것이 Chosen에 추가되는 것을 보고 싶지만 이벤트 수신은 덜 집중적인 방식으로 추가되어야 합니다. @adriengibrat 의 솔루션은 수백 개의 그룹이 있는 경우 잘 수행되지 않는 각 그룹에 리스너를 적용합니다. 옵션 그룹에 대해 테스트할 수 있는 검색 결과 div에 이미 클릭 이벤트가 있습니다. 옵션이 설정되면 CSS를 사용하여 배경색을 변경해야 합니다.

+1. 나는 optgroup이 선택되면 (선택적으로) 모든 자식을 비활성화/숨길 것이라고 생각했습니다.

이 기능에 대해 +1

@pfiller 이 또는 search_improvements 분기에 대한 업데이트가 있습니까? 마스터에 병합되는 것을 보고 싶습니다.

선택 가능한 그룹도 필요합니다. 원래 코드를 변경하려고 시도한 후 "optgroup을 건너뛰고 하위 항목 들여쓰기를 위한 공백 추가"에 대한 자주 제안된 답변에서 영감을 받았습니다. 끔찍해 보이지만 Chosen은 CSS에 의해 멋지게 스타일이 지정되어 있기 때문에 optgroup이 아닌 선택을 사용하고 각 옵션에 클래스를 사용하여 그룹화된 디스플레이처럼 보이게 하는 것은 어떻습니까?

이 바이올린에서 기본 버전을 볼 수 있습니다. http://jsfiddle.net/slothbear/9xqpF/

나는 스타일에 많은 시간을 할애하지 않았지만 당신은 아이디어를 얻을 것입니다. 이것은 내가 필요로 하는 두 가지 기능인 선택 가능한 optgroup과 검색 가능한 optgroup을 제공합니다. 모두 optgroup이 없습니다.

내 프로젝트에서 이 기술을 사용하여 앞으로 나아가고 있지만 피드백을 찾고 있습니다. 작동하는 것으로 보입니다. 더 나은 방법이 생각나나요? 또는 문제가 있습니까?

_아마도 언급해야 한다는 것을 깨달았습니다. 바이올린은 옵션 추가를 활성화하기 위해 Chosen의 Koenpunt 포크를 사용하고 있습니다. 그러나 나는 그것이 이 예에 영향을 미치지 않는다고 생각합니다._

_저도 안내를 구하고 있습니다. 나는 이 기술이 select 기능에 근접하기 위해 선택된 철학의 꽤 먼 분야라는 것을 알고 있습니다. 그러나 옵션이 이 기능에 적합하다면 기꺼이 작업하겠습니다._

이 기능에 대해 +1, 이 기능을 지원하는 방법을 찾다가 선택한 것을 찾았습니다.

(나는 그룹 제목을 선택하거나 그룹 항목을 선택할 수 있는 방법을 찾고 있었습니다) 위의 Slothbear에 따라

편집 : 결국 나는 다음을 수행하여 이것을 에뮬레이트했습니다.
클래스에 유의하십시오. 커서를 포인터로 설정하는 CSS에 .clickable도 추가했습니다.

<select name="category" data-placeholder="Choose a category..." class="chosen-select">
    <option value="group-1 class="group-result clickable">Group Title</option>
    <option value="1" class="group-option">Item Name</option>
    <option value="2" class="group-option">Item Name</option>
</select>

여기 내 솔루션이 있습니다. 내 요구 사항에 따라 다르지만 쉽게 조정하고 필요에 따라 변경할 수 있습니다.

예시:
자동차
-차1
-차2
-차3
비행기
-평면1
-평면2

내가 한 것은 모든 그룹에서 처음에 새 옵션을 만드는 것입니다. 그렇게 하면 '전체' 옵션이 그룹 바로 뒤에 표시됩니다.
자동차
- 모든 자동차
-차1
-차2
-차3
사람들
-모든 사람들
-사람1
-사람2

'results_option_build' 에서 데이터가 그룹일 때 'All' 옵션을 'result_add_group'에 두 번째 매개변수로 전달하고 다음 반복에서 'All' 옵션을 건너뜁니다.

if (data.group) {
내용 += this.result_add_group(데이터, _ref[++_i])

이제 'result_add_group'으로 이동하여 그룹을 우리가 전달한 옵션으로 교체하되 그룹 스타일은 유지합니다.
result_add_group = 기능(그룹, 옵션) {
.
.
반품 "

그게 다야.. 원하는 경우 CSS에서 커서를 포인터로 변경하십시오.

이들 중 어느 것도 검색 기능을 고려하지 않는 것 같습니다. 기본적으로 선택됨에서 옵션을 검색하면 그룹 레이블도 표시됩니다. 이 방법은 여러 그룹이 있고 동일한 옵션이 있는 경우 이 방법을 사용하지 않으므로 시각적으로 동일한 항목 목록으로 끝납니다.

다중 선택의 관리를 용이하게 하므로 라이브러리의 옵션으로 통합하는 것이 매우 흥미로울 것입니다. 일부 버전에서 압착을 언급 했습니까? 인사

임시 수정 사항인 javascript를 사용하여 이것을 구현했습니다. 다중 선택에는 사용하지 않지만 사용자 지정 그룹화에는 사용합니다. 나는 그룹을 옵션이지만 그룹처럼 보이게 만들고 하위 옵션을 검색할 때 그룹이 selected.js http://stackoverflow 에서 정상적으로 표시되는 것처럼 '그룹' 키워드를 지정했습니다

내 프로젝트의 요구 사항이기 때문에 이것을 선택한 로컬 사본에 추가했습니다. 결국 꽤 쉬웠습니다.

set_default_values 함수에서 끝에 this.group_selectable = this.options.group_selectable != null ? this.options.group_selectable === true : false; 를 넣었습니다.

그런 다음 result_add_group 에서 그룹에 할당된 클래스를 다음과 같이 변경했습니다.

if (this.group_selectable) {
        group_el.className = "active-result group-result";
      } else {
        group_el.className = "group-result";
      }
group_el.setAttribute("data-group-array-index", group.array_index);

그리고 마지막으로 result_select 에 약간의 해킹이 추가되었습니다.

if (high[0].getAttribute("data-group-array-index")) {
          var that = this;
          high.nextUntil('.group-result').each(function(index, element) {
            that.result_highlight = $(element);
            that.result_select(evt);
          });
        }

직전
item = this.results_data[high[0].getAttribute("data-option-array-index")];

https://gist.github.com/ruhley/9944574 에서 전체 코드를

https://gist.github.com/ruhley/9944574#file -chosen-jquery-js-L1005

var itm = that.results_data[element.getAttribute("data-option-array-index")];
if(itm && !itm.selected){
    that.result_highlight = $(element);
    that.result_select(evt);
}

파티에 조금 늦었지만: 이 기능에 +1!

솔루션을 위한 @ruhley +1은 매력처럼 작동합니다!
전체 코드 페이지에는 있지만 코드 세그먼트에는 없는 작은 세부사항:
또 다른{
마지막에 누락.

안녕하세요,
귀하의 코드에 대해 @ruhley 에게 감사드립니다.
그러나 수정하면 그룹을 클릭한 후 비활성화되지 않고 다시 선택할 수 있습니다.

내 개선 사항은 다음과 같습니다(선택한 1.4.2 기준).

• 158행 뒤에 "set_default_values" 함수에 다음을 추가합니다.

this.group_selectable = this.options.group_selectable != null ? this.options.group_selectable === true : false;

_매개변수 추가_

• "results_option_build" 함수에서 222행을 다음과 같이 변경합니다.

content += this.result_add_group(data, _ref.slice(_i+1, _i+data.children+1));

_아이들에게 "result_add_group" 기능을 부여하세요._

• 라인 272, "result_add_group" 함수 재정의를 다음과 같이 변경합니다.

AbstractChosen.prototype.result_add_group = function(group, childrens) {

_아이들을 받기 위해_

• 285행( group_el = document.createElement("li"); ) 뒤에 "result_add_group" 함수에서 다음을 추가합니다.

if (this.group_selectable) {
  var all = true;
  $.each(childrens, function(index, element) {
    if(!element.selected){
      all = false;
    }
  });
  if(!all) {
    classes.push("active-result");
  } else {
    classes.push("result-selected");
  }
}
group_el.setAttribute("data-group-array-index", group.array_index);

_최소한 하나의 자식이 선택되지 않은 경우 그룹을 클릭할 수 있게 합니다. (이 부분은 "all" 변수로 인해 개선할 수 있습니다)._

• 1052행( high.addClass("result-selected"); ) 뒤에 "result_select" 함수에서 다음을 추가합니다.

if (high[0].getAttribute("data-group-array-index")) {
  var that = this;
  high.nextUntil('.group-result').each(function(index, element) {
    if($(element).hasClass('active-result')) {
      that.result_highlight = $(element);
      that.result_select(evt); 
    }
  });
} else {

_선택하지 않은 하위 항목만 추가합니다._

• 1083행 이후 "result_select" 함수에서:

}

_클릭한 그룹의 조건을 닫아야 합니다._

해당 코드를 올바르게 들여쓰기하는 것을 잊지 마십시오 ;)

다음은 내 파일의 전체 버전입니다. https://gist.github.com/GuillaumeSTEIN/7a4ece3c6bb487d16df0
다음은 차이점입니다(1년 가능): https://www.diffnow.com/?report=8zhe9
즐거운 시간 보내세요

이거 아직 구현 안된건가요?

@GuillaumeSTEIN 정식 버전 스크립트를 시도했지만 아무 것도 변경되지 않은 것 같습니다.
작동하려면 HTML에 몇 가지 특수 매개변수나 클래스를 추가해야 합니까?
http://codepen.io/ 또는 jsfiddle에서 작업 예제를 만들 수 있습니까?

예, 이 기능을 활성화하려면 group_selectable 옵션을 true로 설정해야 합니다.

@GuillaumeSTEIN 덕분에 효과가 있었지만 @adriengibrat 스크립트에서

선택된 그룹에는 "결과 선택" 클래스가 있습니다.
CSS를 할 수 있습니다. 다음은 내가 작성한 내용입니다. 필요에 따라 수정해야 할 수도 있습니다.

 select.form-control + .chosen-container-multi .chosen-results li.result-selected{
     display: list-item;
     color: #ccc;
     cursor: default;
     background-color: white;
 }

나는 그것을 찔렀다 # 2678

이렇게 유용한 기능이 되겠네요! 구현되었으면 좋겠습니다!

이 기능에 대해 +1입니다.

누군가 이것이 유용하다고 생각하면 @slothbear jsfiddle을 잡고 다음과 같이 개선합니다.

• "모두 지우기" 버튼
• 루트 카테고리 항목을 선택하면 하위 항목이 비활성화 및 선택 해제됩니다. 왜요 ? 제 경우에는 selected를 사용하여 계층 필터를 생성합니다. 여기서 아버지 노드를 선택하면 모든 하위 범주에서 검색이 수행되며 모든 하위 항목을 선택한 것으로 표시하는 UI를 오염시키고 싶지 않습니다.

http://jsfiddle.net/Zardoz/pf6dhrbc/6/

다중 선택(버전 1.7.0에 추가됨)에서 결과를 선택한 후 결과를 열린 상태로 유지하기 위해 방금 선택한 1.8.3으로 업그레이드했습니다. 멋진 기능이 추가되어 기쁩니다. 그러나 1.6.1을 사용하고 있었고 그룹 이름을 클릭할 때 전체 그룹을 추가할 수 있도록 여기에서 코드를 사용했습니다. http://robido.com/jquery/add-selectdeselect-optgroup-click-events-harvests- selected-jquery-plugin/

그 코드는 지금까지 훌륭하게 작동했습니다. 1.8.3 및 hide_results_on_ select:false를 사용 하면 무언가가 중단되고 현재 강조 표시된 결과 옵션만 선택됩니다. 해당 줄이 제거되면(기본값인 true로 다시 설정하고 선택 시 숨기기) 제대로 작동하고 전체 그룹 결과 옵션을 선택합니다. 따라서 hide_results_on_ select:false 의 무언가가 .group-result 아래에 .result-selected가 아닌 모든 항목을 수집하는 기능을 중단/방해합니다. 새로운 기능을 위해 이 능력을 희생하는 것은 잔인합니다.

위의 모든 의견을 검토하여 이것이 새 기능의 결함으로 해결되었는지 확인하지만 사람들이 이것을 테스트할 때 어떤 버전을 사용하고 있는지 알 수 없습니다.

어떤 아이디어?

괜찮아. 나는 충분히 했다. 1.8.3으로 "업그레이드"하는 것은 지난 주 동안 두더지를 두들겨 패는 게임에 불과했습니다. CSS 문제, 예기치 않은 활동 문제 등 다중 선택 기능(처음에는 구현하는 데 몇 년이 걸렸음)에서 결과를 계속 열어 두도록 업그레이드했지만 결과에서 선택할 때 항상 맨 위로 점프한다는 것을 발견했습니다. 그것은 - 아무것도 기다리지 않는 모든 것입니다. 많은 옵션이 있는 단일 선택의 성능이 어떻게든 크롤링 속도가 느려졌습니다. 여기에 나열하기에는 너무 많은 문제가 있습니다. 수년 동안 이 일을 잘 유지하고 있습니다. 저는 그것을 즐겼습니다. 그러나 개선 사항은 사용자 경험을 저하시키는 비용으로 이루어졌으며 나는 그것을 가질 수 없습니다. selected를 뽑아내고 select2를 사용하는 방법을 연구 중입니다. 2018년, 점점 더 충족하기 어려워지는 사용자 기대에 부응하는 선택 도구를 찾아야 할 때입니다. 죄송하고 감사합니다

나도 select2로 옮겼지만 그 전에는 selected에 대해 덤프를 사용하지 않았습니다. 당신은 "고마워"라고 말하는 이상한 방법을 가지고 있습니다.

안녕하십니까,
optgroup을 사용하고 이를 클릭하고 해당 그룹의 모든 옵션을 자동으로 추가하려면 다음을 자바스크립트에 추가하기만 하면 됩니다. (이벤트 트리거 ".group-result"가 더 제한적일 수 있음)

나는 이것이 AbstractChosen.prototype.optgroup_click = function(evt) ....와 같이 AbstractChosen 클래스에 추가될 수 있다고 확신합니다.

$('body').on('click','.group-result',function(){
    // id of select
    var quest=$(this).parent().parent().parent().attr('id');
    quest='#'+quest.substring(0,quest.lastIndexOf('_'));
    // number of optgroup
    var total=$(quest+' optgroup').length;
    // number of group after group-result clicked
    var nb=0;
    $(this).nextAll().each(function(){
        if($(this).hasClass('group-result'))nb++;
    });
    // for clicked group-result, select options in the right select tag by position
    $(quest+' optgroup:nth-of-type('+(total-nb)+')').children().each(function(){
        $(this).prop('selected','selected');
    });
    // update chosen !
    $(quest).trigger('chosen:updated');
});

나는 bootstrap-select를 사용했고 optgroup을 클릭하고 모든 항목을 선택할 수 있는 무언가를 찾기 위해 고군분투했습니다. - 이 링크는 실제로 저에게 효과적이었습니다. 도움이 되길 바랍니다. /select-deselect-optgroup-based-on-option-select-in-select-picker-boostrap