2

jquery multiselect アドオンを実装して、正常に動作するようにしました。選択オプションの長いリストがあり、optgroup ごとに分けられています。optgroups は私の長いリストを整理しますが、それでもユーザーは一番下のオプションにたどり着くまでしばらくスクロールする必要があります。optgroup をデフォルトで折りたたんで、グループをクリックすると折りたたまれないようにするソリューションを探しているだけです。

optgroup をクリックした瞬間に、その下にあるすべてのオプションが自動的に選択されますが、それを防ぎ、代わりに非表示機能に置き換えます。デフォルトでは、jquery は select の optgroup をターゲットにできないことはわかっていますが、Jquery Multiple select アドオンには、どうやらあなたも許可するイベント ハンドラーがあります。サイトの半分までスクロールすると、このアドオンがサポートするすべてのイベント ハンドラーが表示されます。私はこのoptgrouptoggleイベントに非常に興味を持っていました：

optgroup ラベルがクリックされたときに発生します。このイベントは、元のイベント オブジェクトを最初の引数として受け取り、値のハッシュを 2 番目の引数として受け取ります: js $("#multiselect").bind("multiselectoptgrouptoggle", function(event, ui){ /* event: the original event object, most likely "click" ui.inputs: an array of the checkboxes (DOM elements) inside the optgroup ui.label: the text of the optgroup ui.checked: whether or not the checkboxes were checked or unchecked in the toggle (boolean) */ });

次のように show hide 関数を実装しようとしましたが、まだ jquery を使用したことがなく、これを完全に失敗させている可能性があります。どんな助けでも大歓迎です。

http://jsfiddle.net/akhyp/1986/

$("#selected_items").bind("multiselectoptgrouptoggle", function(event, ui){ 
    $(this).children().show();
}, function() {
    $(this).children().hide();
 });
4

1 に答える 1

0

このアプローチにはいくつかの問題があり、コードやプラグインの API に問題があります。

  1. デモ コードは を参照$("#selected_items")していますが、これはマークアップのどこにもありません。$("select")上記の宣言に一致するようにセレクターを変更しますmultiselect。さらに良いのは、jQuery オブジェクトを変数にキャッシュすることです。var $multiselect = $('select');

  2. ドキュメントではbind、イベント リスナーをアタッチするために使用が指定されていbindますが、最近のバージョンの jQuery では非推奨になっています。on代わりに使用してください。

  3. on/bindメソッドに 2 つの関数を渡していますが、必要なのは 1 つだけです。hide()andを使用する代わりに、jQuery のmethodshow()を使用できます。toggle

  4. プラグインは、multiselect生成されたマークアップを意味的に構造化していないためoptgroups、 and の子要素は、and要素を兄弟として、optionまっすぐな要素に変換されます。つまり、期待どおりに使用できないということです。ただし、API は:に関連付けられたチェックボックスを見つける方法を提供します。それらから、各親要素を見つけて非表示にすることができます。残念ながら、API でそれらに直接対処する方法が提供されているようには見えませんが、次のようなコード スニペットを使用できます。lioptgroupoptionchildren()optgroupui.inputsli

    var parentLiOfInput = function(input) { return $(input).closest('li'); }; var $listEls = ui.inputs.map(parentLiOfInput); // $listEls is now an array of jQuery objects // Note this isn't the same as a jQuery wrapped set-- // you can't do $listEls.hide(), for example.

  5. 生成された「オプション」要素を非表示にすると、プラグインが機能しなくなります。jQuery セレクターを使用してチェックボックスを切り替えます。そのセレクターは、関連する要素が表示されることに依存しています。

最後のポイントはブロッカーです。チェックボックスを非表示にすると、プラグインは次の optgroup クリックで失敗します。失敗動作のデモ。

この時点では、プラグインのコードを直接変更しない限り、オプションはありません。

于 2015-02-17T16:34:58.693 に答える