首页 文章

使用select2 4.0.3创建下拉列表，并根据其他select2值禁用这些选项

提问于
浏览 次
3

我想基于数组值创建动态select2下拉列表并禁用下拉列表中的选项 . 当我在当前选择框中选择该选项时，该选项将在其他选择框下拉列表中禁用 . 这是我的代码

var selectArray = [{id: 0, value: 'test'}, {id: 1, value: 'test1'},{id: 2, value: 'test2'}, {id: 3, value: 'test3'},{id: 4, value: 'test4'}, {id: 5, value: 'test5'}];

var data = [{id:1, text: 'value1'},{id:2, text: 'value2'},{id:3, text: 'value3'},{id:4, text: 'value4'},{id:5, text: 'value5'}];

$.each(selectArray, function( index, value ) {
  var html = '<li class="m-b-20"><select id="select_id_'+ value.id +'" class="select2-option"></select></li>';
  $('#selectbox').append(html);
});

$(".select2-option").select2({
    minimumResultsForSearch: -1,
    data: data
});

ul li {
list-style: none;
 }
 select {
 width: 200px;
 }
 .m-b-20 {
 margin-bottom: 20px;
 }

<html>
<head>
<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.3/css/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
</head>
<body>
<div>
<ul id="selectbox">
</ul>
</div>
</body>
</html>

谁能帮帮我吗？

javascript jquery html select jquery-select2-4

1 回答

  • 0

    我找到了show的解决方案并隐藏了下拉列表中的选项 .

    var selectArray = [ {id: 1, value: 'test1'},{id: 2, value: 'test2'}, {id: 3, value: 'test3'},{id: 4, value: 'test4'}, {id: 5, value: 'test5'}];

var data = [{id: '', text: '--none--'}, {id:'1', text: 'value1'},{id:'2', text: 'value2'},{id:'3', text: 'value3'},{id:'4', text: 'value4'},{id:'5', text: 'value5'}];

$.each(selectArray, function( index, value ) {
  var html = '<li class="m-b-20"><select id="select_id_'+ value.id +'" class="select2-option"></select></li>';
  $('#selectbox').append(html);
});

$.fn.select2.amd.define('select2/data/customAdapter', ['select2/data/array', 'select2/utils'],
    function (ArrayAdapter, Utils) {
        function CustomDataAdapter ($element, options) {
            CustomDataAdapter.__super__.constructor.call(this, $element, options);
        }
        Utils.Extend(CustomDataAdapter, ArrayAdapter);
        CustomDataAdapter.prototype.updateOptions = function (data) {
            this.$element.find('option').remove();
            this.addOptions(this.convertToOptions(data));
        }
        return CustomDataAdapter;
    }
);
var customAdapter = $.fn.select2.amd.require('select2/data/customAdapter');

$(".select2-option").select2({
    dataAdapter: customAdapter,
    minimumResultsForSearch: -1,
    data: data
    
});
function autoFillSelectedData() {
    var selects = $('select.select2-option');
    var selectedSelect2value = [];
    for (var i = 0; i < selects.length; i++) {
        selectedSelect2value.push(selects[i].value);
    }
    for (var i = 0; i < selects.length; i++) {
        $.each(data, function(idx, val) {
            if(val.id != "" && selectedSelect2value.indexOf(val.id) != -1 && val.id != selects[i].value) {
                data[idx].disabled = true;
            } else {
                data[idx].disabled = false;
            }

        });
        $('select#'+ selects[i].id).data('select2').dataAdapter.updateOptions(data);
        $('select#'+ selects[i].id).val(selectedSelect2value[i]);
    }
}
$("select").on("change", function () {
    autoFillSelectedData();
});

    ul li {
list-style: none;
 }
 select {
 width: 200px;
 }
 .m-b-20 {
 margin-bottom: 20px;
 }

    <html>
<head>
<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.3/css/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.js"></script>
</head>
<body>
<div>
<ul id="selectbox">
</ul>
</div>
</body>
</html>
    回复于

相关问题