使用select2 4.0.3创建下拉列表数组，并基于其他select2值禁用选项
[英]create array of dropdown using select2 4.0.3 and disable the options based on other select2 values
问题描述
我想基于数组值创建一个动态的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="mb-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; } .mb-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 个解决方案
解决方案1
-1 已采纳 2017-07-18 10:41:33
我发现显示和隐藏下拉列表中的选项的解决方案。
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="mb-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; } .mb-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无法使用Ajax调用填充其他select2字段
[英]Select2 4.0.3 unable to fill other select2 fields using ajax call
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.