Chosen: optgroupラベルをクリック可能にする

これは便利ですが、standarthtml-selectでは許可されていません。

@ Fr3nzzy ：はい、しかしそれがオプションであれば、これは問題ではないでしょう？

@ Fr3nzzy ：可能であれば、標準のhtml-selectでも検索できません...それでも非常に便利です。そのため、Chosenは優れています。標準のselectが改善されます。 ここでも同じ理由を適用できると思います。

@ 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のソリューションは、リスナーを各グループに適用しますが、グループが数百ある場合はパフォーマンスが

+1。 optgroupを選択すると、（オプションで）すべての子が無効化/非表示になると考えていました。

この機能の+1

@pfillerこれまたはsearch_improvementsブランチの更新はありますか？ それがマスターにマージされるのを見たいです。

選択可能なグループも必要です。 私はもともとコードを変更しようとしましたが、「optgroupをスキップし、サブアイテムをインデントするためにスペースを追加する」というよくある回答に触発されました。 それはひどいように見えましたが、ChosenはCSSによって適切にスタイル設定されているので、非optgroup selectを使用し、各オプションでクラスを使用して、グループ化された表示のように見せてはどうでしょうか。

このフィドルで基本的なバージョンを見ることができます： http ：

私はそのスタイルに多くの時間を費やしませんでしたが、あなたはその考えを理解するでしょう。 これにより、必要な2つの機能が提供されます。選択可能なオプトグループと検索可能なオプトグループです。 すべてoptgroupsなし。

私は自分のプロジェクトでこのテクニックを進めようとしていますが、フィードバックを求めています。 動作しているようです。 もっと良い方法を考えられますか？ または何か落とし穴はありますか？

_おそらく言及する必要があることに気づきました。フィドルは、オプションの追加を有効にするために、ChosenのKoenpuntフォークを使用しています。 しかし、それがこの例に影響を与えるとは思いません。_

_私もガイダンスを探しています。 この手法は、おそらく選択された哲学からかなり離れており、 select機能に近づいていますが、この機能に適切なオプションがあれば、喜んで作業を行います。_

この機能の+1、これをサポートする方法を探しているときに選ばれたことがわかりました

（私はグループタイトルを選択するか、グループアイテムを選択できることを探していました）上記のナマケグマのように

編集：最後に、私はこれを次のようにエミュレートしました。
クラスに注意してください。カーソルをポインタに設定する.clickableもcssに追加しました。

<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>

これが私の解決策です。 それは私のニーズに固有のものですが、簡単に微調整して自分のニーズに変更することができます。

例：
車
-car1
-car2
-car3
飛行機
-plane1
-plane2

私がしたことは、最初にすべてのグループから新しいオプションを作成することです。そうすれば、「すべて」のオプションはグループの直後に表示されます。
車
-すべての車
-car1
-car2
-car3
人
-すべての人
-person1
-person2

'results_option_build'で、データがグループの場合、2番目のパラメーターとして 'al'オプションを 'result_add_group'に渡し、次の反復で 'All'オプションをスキップします。

if（data.group）{
コンテンツ+ = this.result_add_group（data、_ref [++ _ i]）

次に、「result_add_group」に移動して、渡したオプションでグループを置き換えますが、グループのスタイルは維持します。
result_add_group = function（group、option）{
。
。
戻る "

それだけです。必要に応じて、カーソルをcssのポインタに変更します。

これらのどれも検索機能を考慮に入れていないようです。 デフォルトで選択されているオプションを検索すると、グループラベルも表示されます。 この方法では、複数のグループがあり、それらに同じオプションがある場合は、これでうまくいくので、視覚的に同じアイテムのリストになってしまいます。

複数の選択の管理を容易にするので、ライブラリのオプションとして統合することは非常に興味深いでしょう。 いくつかのバージョンでスクイーズについて言及しましたか？ 挨拶

私はこれをjavascriptを使用して実装しましたが、これは一時的な修正です。 複数の選択には使用しませんが、カスタムグループ化には使用します。 最終的にグループをオプションにしましたが、グループのように見え、サブオプションを検索すると、choose.js http：// stackoverflowで通常のようにグループが表示される「groups」キーワードを指定しました

これは私のプロジェクトの要件であったため、chooseのローカルコピーに追加しました。 結局、それはかなり簡単でした。

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);

_これにより、少なくとも1つの子が選択されていない場合に、グループをクリック可能になります。 （この部分は「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 ：
ここに差分があります（1年間利用可能）： https ：
楽しむ

これはまだ実装されていませんか？

@GuillaumeSTEINフルバージョンのスクリプトを試しましたが、何も変わっていないようです。
HTMLを機能させるには、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をつかんで、それを次のように改善します：

• 「すべてクリア」ボタン
• ルートカテゴリ項目を選択すると、子が無効になり、選択が解除されます。 どうして ？ 私の場合、chooseを使用して階層フィルターを生成します。ここで、父親ノードを選択すると、すべての子カテゴリが検索されます。UIを汚染して、すべての子を選択したままにすることは望ましくありません。

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

複数選択で結果を選択した後も結果を開いたままにするために、選択した1.8.3にアップグレードしました（バージョン1.7.0で追加）。 素晴らしい機能、追加されてよかったです。 ただし、1.6.1を使用していて、ここのコードを使用して、グループ名をクリックしたときにグループ全体を追加できるようにしました： http ：

そのコードは今までうまく機能してきました。 1.8.3とhide_results_on_select ：falseを使用すると、何かが壊れ、現在強調表示されている結果オプションのみが選択されます。 その行が削除されると（デフォルトのtrueに戻し、選択時に非表示になります）、正常に機能し、グループ全体の結果オプションが選択されます。 したがって、hide_results_on_ select：falseの何かが、.group-resultの下で.result-selectedではないものをすべて収集する機能を壊したり妨害したりしています。 新機能のためにこの能力を犠牲にすることは残酷です。

上記のコメントをすべて調べて、これが新機能の欠陥として対処されているかどうかを確認しますが、これをテストしているときに使用しているバージョンがわかりません。

何か案は？

わかった。 もういいよ。 1.8.3への「アップグレード」は、先週のモグラたたきのゲームに他なりませんでした。 cssの問題、予期しないアクティビティの問題など。複数選択機能で結果を開いたままにするようにアップグレードしましたが（最初に実装するのに何年もかかりました）、結果から選択すると常にトップに戻ることがわかりました。それは-何も待っていないことすべてです。 多くのオプションを備えた単一の選択でのパフォーマンスは、どういうわけかクロールに遅くなりました。 さらに多くの問題が多すぎてここにリストできません。 このことを何年も続けて良い仕事をして、私はそれを楽しんできました。 しかし、改善はユーザーエクスペリエンスを低下させるという犠牲を払ってもたらされたものであり、私にはそれができません。 選択したものを引き出してselect2を使用する方法を研究しています。 2018年は、ユーザーの期待に応え、満たすのがますます困難になる選択ツールを見つけるときです。 すみません、ありがとう

私もselect2に移動しましたが、それ以前はchooseにダンプを取りませんでした。 「ありがとう」という奇妙な言い方があります。

こんにちは、
optgroupを使用してクリックし、そのグループのすべてのオプションを自動的に追加できるようにする場合は、これをjavascriptに追加するだけです:(イベントトリガー ".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をクリックしてそのすべてのアイテムを選択できるものを見つけるのにも苦労していました-このリンクは実際に私のために機能しました、それが役立つことを願っています： https ：