使用select2 4.0.3创建下拉列表数组，并根据其他select2值禁用选项
我想创建一个基于数组值的动态select2下拉列表，并禁用下拉列表中的选项。当我在当前选择框中选择该选项时，该选项将在其他选择框下拉中禁用。这是我的代码
null
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>null
有谁能帮帮我吗？
共有1个答案
我找到了在下拉列表中显示和隐藏选项的方法。
null
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>-
问题内容： 我想创建两个下拉列表，类别和项目。 如果我选择名为car的类别之一，则项目下拉列表应包含Honda，Volvo和Nissan。 如果我选择一个名为phone的类别，则项目下拉列表应具有此iPhone，Samsung，Nokia。 我怎样才能做到这一点？我知道我无法使用纯HTML做到这一点。 问题答案： 工作演示 （带有jquery） 更新 ：使用eval（）能够添加所需的任意数量的数组
-
我期待城市列表中的城市名单基于代码的输入。 请求你的协助。
-
假设我有一个名为mytable的表，它看起来像这样： 我希望能够更新所有的记录在p6列添加到39但只为行有不同的p2值。换句话说，结果表应该如下所示： 我将p6行着色为黄色，以显示它不应该移动的地方，因为所有的p2单元格都是灰色的，它们的值是相同的。绿色的p6行应该会增长，因为p2也会增长，所以我把+39加到所有的行上。示例中的最后第13行再次为黄色，因为12行上的p2=13行上的p2。 在Gor
-
应用：Hibernate、Spring 3.0 MVC、JSP（使用Spring表单） 要求：使用Hibernate从数据库中选择一个表数据，并使用Spring MVC将其显示为JSP页面中的下拉列表。 代码：Hibernate/道代码是 烹饪课 食谱DaoImpl类 SpringMVC JSP页面： 在这样做时，我收到以下错误： 有人能建议如何解决这个问题吗？我已经检查了几篇文章，并试图复制它们
-
我正在android studio中使用java创建一个电子商务应用程序。我想创建一个多选下拉列表，用户可以从中选择一个或多个尺寸。我想填写包含MySQL数据库中所有大小的下拉列表。有谁能告诉我怎么做，或者给我建议一些教程，因为我现在还没有得到。
-
问题内容： 我有一组对象，它们只是项目。我还有一个下拉菜单，我希望使用该下拉菜单允许用户按价格或评分进行过滤，但是在页面加载时不应进行过滤。 如何根据当前选择选项映射项目数据以进行过滤？ 我有一个笨拙的入门：LINK 问题答案： 首先，您选择的值不明确。它们包含可以对条目进行过滤和排序的值-将它们分开是两个功能，因此将它们分开。 接下来，您需要定义一个自定义过滤器，该过滤器将根据所选的评级过滤数据