logo标签列表

选择一个选项后，Select2 将选择所有其他选项。

javascriptjqueryjquery-select2
10
我在这个JSFIDDLE中提供了一个select 2。如果我选择一个选项，如何调用All来选择该select字段中除自身外的所有选项，意味着All选项更像是选择全部按钮。取消选择All将取消选择所有选项。我在下面提供了与jsfiddle相同的代码： HTML： 
<select class="parent_filter_select2 pull-right" id="parent_filter_select2" multiple="multiple" name="select_project" style="width: 300px;">
<option value="all">All</option>
        <option value="Option A">Option A</option>
        <option value="Option B">Option B</option>
        <option value="Option C">Option C</option>
        <option value="Option D">Option D</option>
</select>
JavaScript： 
$('#parent_filter_select2').select2({
    placeholder: 'Select'
});
任何帮助都非常感激，谢谢。 更新：我发现了一个类似我想要的东西，但它使用复选框，所以我正在考虑如何将其实现在“全部”选项上，而且它也选择了“全部”选项，代码如下： 
$("#checkbox").click(function(){
      if($("#checkbox").is(':checked') ){ //select all
        $("#parent_filter_select2").find('option').prop("selected",true);
        $("#parent_filter_select2").trigger('change');
      } else { //deselect all
        $("#parent_filter_select2").find('option').prop("selected",false);
        $("#parent_filter_select2").trigger('change');
      }
  });
您的意思是选择“全部”时，所有选项都会被添加，而不是添加“全部”选项吗？ - orabis
是的，除了“全部”选项之外的所有选项。 - M.Izzat
3个回答
12

在Select2的github仓库上有一个未解决的问题，请参见：全选/全不选标题

如'bkdcom'用户所建议的（请参见评论），您可以定义一个selectAllAdapter并将其与Select2（版本4）一起使用。

检查您更新的fiddle：https://jsfiddle.net/beaver71/tjvjytp3/

或者这个代码片段：

/*
      Define the adapter so that it's reusable
*/         
$.fn.select2.amd.define('select2/selectAllAdapter', [
    'select2/utils',
    'select2/dropdown',
    'select2/dropdown/attachBody'
], function (Utils, Dropdown, AttachBody) {

    function SelectAll() { }
    SelectAll.prototype.render = function (decorated) {
        var self = this,
            $rendered = decorated.call(this),
            $selectAll = $(
                '<button class="btn btn-xs btn-default" type="button" style="margin-left:6px;"><i class="fa fa-check-square-o"></i> Select All</button>'
            ),
            $unselectAll = $(
                '<button class="btn btn-xs btn-default" type="button" style="margin-left:6px;"><i class="fa fa-square-o"></i> Unselect All</button>'
            ),
            $btnContainer = $('<div style="margin-top:3px;">').append($selectAll).append($unselectAll);
        if (!this.$element.prop("multiple")) {
            // this isn't a multi-select -> don't add the buttons!
            return $rendered;
        }
        $rendered.find('.select2-dropdown').prepend($btnContainer);
        $selectAll.on('click', function (e) {
            var $results = $rendered.find('.select2-results__option[aria-selected=false]');
            $results.each(function () {
                self.trigger('select', {
                    data: $(this).data('data')
                });
            });
            self.trigger('close');
        });
        $unselectAll.on('click', function (e) {
            var $results = $rendered.find('.select2-results__option[aria-selected=true]');
            $results.each(function () {
                self.trigger('unselect', {
                    data: $(this).data('data')
                });
            });
            self.trigger('close');
        });
        return $rendered;
    };

    return Utils.Decorate(
        Utils.Decorate(
            Dropdown,
            AttachBody
        ),
        SelectAll
    );

});

$('#parent_filter_select2').select2({
    placeholder: 'Select',
    dropdownAdapter: $.fn.select2.amd.require('select2/selectAllAdapter')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>

<select class="parent_filter_select2 pull-right" id="parent_filter_select2" multiple="multiple" name="select_project" style="width: 300px;">
        <option value="Option A">Option A</option>
        <option value="Option B">Option B</option>
        <option value="Option C">Option C</option>
        <option value="Option D">Option D</option>
</select>

@beaver 这个fiddle示例非常好，但是它有一个不愉快的bug - 如果你输入"opt"并选择例如"Option A" - 你仍然在搜索行中输入了"opt"。 因此，要输入下一个搜索词 - 你必须手动删除先前输入的"opt"，然后再次输入...是否可能修复这个问题？ - Serge
3
请使用以下脚本。 

$("#parent_filter_select2 option").click(function () {
    var val = $(this).attr("value");
    if(val == 'all'){
        $('#parent_filter_select2 option').prop('selected', true);
        $('#parent_filter_select2 option[value="all"]').prop('selected', false);
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="parent_filter_select2 pull-right" id="parent_filter_select2" multiple="multiple" name="select_project" style="width: 300px;">
<option value="all">All</option>
        <option value="Option A">Option A</option>
        <option value="Option B">Option B</option>
        <option value="Option C">Option C</option>
        <option value="Option D">Option D</option>
</select>

2
您可以使用手动方式选择选项。 
$('#parent_filter_select2').select2('val', values);
当你从下拉菜单中选择选项“全部”时，你可以将值作为JavaScript数组获取。请保留HTML标签。 
 var values = new Array();
$('#parent_filter_select2').find('option').each(function () {
    var opt= $(this);
    var opvalue= opt.attr('value');
    if(opvalue != "all")
        values.push(opvalue);        
});

这里提供一份示例代码。

  $('body').on('change', '#parent_filter_select2', function () {
 var val = $(this).val();
    //alert(val);
    if(val.indexOf('all') != -1){
            $('#parent_filter_select2').select2('val', values);
         }
        else{
            $('#parent_filter_select2').select2('val', val);
        }
});

你可以在这里查看jsfiddle演示。

看看它是否有帮助...

嗨@Saurabh，感谢您的意见，不幸的是，在我的项目中，所有选项都是动态生成的，因此手动不是一个选择。谢谢。 - M.Izzat
好的，你现在可以检查我的更新答案，它一定会按照你的要求工作。只需检查更新后的jsfiddle https://jsfiddle.net/kLw8rnre/36/ - Saurabh Solanki
这个答案对你有用吗？@M.Izzat 如果您有任何疑问，请告诉我。 - Saurabh Solanki
嗨@Saurabh，抱歉刚才忙于工作，似乎如果您在选择“全部”之前选择任何其他选项，则它将无法正常工作，如果您取消选择“全部”，则剩余选项不会取消选择，否则一切都正常，再次感谢您的努力。 - M.Izzat
我已经更新了答案，请检查一下，它将在您上面提到的情况下工作，并且请检查更新后的jsfiddle https://jsfiddle.net/kLw8rnre/41/。 - Saurabh Solanki
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，