使用 select2 4.0.3 创建下拉数组并禁用基于其他 select2 值的选项
Posted
技术标签:
【中文标题】使用 select2 4.0.3 创建下拉数组并禁用基于其他 select2 值的选项【英文标题】：create array of dropdown using select2 4.0.3 and disable the options based on other select2 values 【发布时间】：2017-12-22 19:21:23 【问题描述】：我想根据数组值创建一个动态 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>谁能帮帮我？
【问题讨论】：
【参考方案1】：我找到了在下拉列表中显示和隐藏选项的解决方案。
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>【讨论】：
以上是关于使用 select2 4.0.3 创建下拉数组并禁用基于其他 select2 值的选项的主要内容，如果未能解决你的问题，请参考以下文章