28

選択メニュープラグインchosen.jsの場合、「リスト内のすべてのアイテムを選択」または「リスト内のすべてのアイテムを削除」機能を複数の選択入力に追加する確立された方法はありますか？メインブランチですか、それともフォークの1つですか？または、誰かが以前にこれを行ったことがありますか？

4

7 に答える 7

50

それはかなり簡単なはずです。最初に「通常の」方法で実行してください。

$('.my-select-all').click(function(){
    $('#my_select option').prop('selected', true); // Selects all options
});

次に、イベントをトリガーしてliszt:updated、選択したウィジェットを更新します。これにより、全体が次のようになります。

更新：下にスクロールして他の回答を確認しない人のために、イベントはchosen:updated2013年8月にリリースされたバージョンの時点で呼び出されます。疑問がある場合はドキュメントを参照してください。

<select multiple>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<button class="select">Select all</button>
<button class="deselect">Deselect all</button>

$('select').chosen();
$('.select').click(function(){
    $('option').prop('selected', true);
    $('select').trigger('liszt:updated');
});
$('.deselect').click(function(){
    $('option').prop('selected', false);
    $('select').trigger('liszt:updated');
});​

作業デモ（jsコードは下部にあります）：http：//jsfiddle.net/C7LnL/1/

よりタイトなバージョン：http：//jsfiddle.net/C7LnL/2/

さらにタイトなバージョン：http：//jsfiddle.net/C7LnL/3/

于 2012-06-23T19:36:02.170 に答える
12

このコードを試してみてください。100% 動作します

// Deselect All
$('#my_select_box option:selected').removeAttr('selected');
$('#my_select_box').trigger('chosen:updated');

// Select All
$('#my_select_box option').prop('selected', true);  
$('#my_select_box').trigger('chosen:updated');
于 2016-01-14T05:36:31.770 に答える
8

同様の機能を見逃していました。これにより、ポップアップ リストの上部に All と None (オプション uncheck_all_text と select_all_text でカスタマイズ可能なテキスト) の 2 つのリンクが追加されます。グループ化を使用する場合は、これを編集する必要がある場合があります。

$("select").on("chosen:showing_dropdown", function(evnt, params) {
    var chosen = params.chosen,
        $dropdown = $(chosen.dropdown),
        $field = $(chosen.form_field);
    if( !chosen.__customButtonsInitilized ) {
        chosen.__customButtonsInitilized = true;
        var contained = function( el ) {
            var container = document.createElement("div");
            container.appendChild(el);
            return container;
        }
        var width = $dropdown.width();
        var opts = chosen.options || {},
            showBtnsTresshold = opts.disable_select_all_none_buttons_tresshold || 0;
            optionsCount = $field.children().length,
            selectAllText = opts.select_all_text || 'All',
            selectNoneText = opts.uncheck_all_text || 'None';
        if( chosen.is_multiple && optionsCount >= showBtnsTresshold ) {
            var selectAllEl = document.createElement("a"),
                selectAllElContainer = contained(selectAllEl),
                selectNoneEl = document.createElement("a"),
                selectNoneElContainer = contained(selectNoneEl);
            selectAllEl.appendChild( document.createTextNode( selectAllText ) );
            selectNoneEl.appendChild( document.createTextNode( selectNoneText ) );
            $dropdown.prepend("<div class='ui-chosen-spcialbuttons-foot' style='clear:both;border-bottom: 1px solid black;'></div>");
            $dropdown.prepend(selectNoneElContainer);
            $dropdown.prepend(selectAllElContainer);
            var $selectAllEl = $(selectAllEl),
                $selectAllElContainer = $(selectAllElContainer),
                $selectNoneEl = $(selectNoneEl),
                $selectNoneElContainer = $(selectNoneElContainer);
            var reservedSpacePerComp = (width - 25) / 2;
            $selectNoneElContainer.addClass("ui-chosen-selectNoneBtnContainer")
                .css("float", "right").css("padding", "5px 8px 5px 0px")
                .css("max-width", reservedSpacePerComp+"px")
                .css("max-height", "15px").css("overflow", "hidden");
            $selectAllElContainer.addClass("ui-chosen-selectAllBtnContainer")
                .css("float", "left").css("padding", "5px 5px 5px 7px")
                .css("max-width", reservedSpacePerComp+"px")
                .css("max-height", "15px").css("overflow", "hidden");
            $selectAllEl.on("click", function(e) {
                e.preventDefault();
                $field.children().prop('selected', true);
                $field.trigger('chosen:updated');
                return false;
            });
            $selectNoneEl.on("click", function(e) {
                e.preventDefault();
                $field.children().prop('selected', false);
                $field.trigger('chosen:updated');
                return false;
            });
        }
    }
});

また、CSS を使用して、選択したチョイスが数十ある場合に備えて、選択したチョイスの高さを制限しています。

    .chosen-choices {
        max-height: 150px;
    }
于 2013-09-13T11:31:56.897 に答える
2

選択をクリアする簡単な方法：

$('select').val('');
$('select').val('').trigger("chosen:updated");
于 2016-06-19T05:09:30.093 に答える
-1 
$("#ctrlName option:selected").removeAttr("selected").trigger('liszt:updated');

すべてクリア

$("#ctrlName option").attr("selected","selected").trigger('liszt:updated');

すべて選択

于 2015-02-25T10:56:17.260 に答える