使用select2 4.0.3创建下拉列表并禁用基于其他select2值的选项

我想根据数组值创建一个动态select2下拉列表并禁用下拉列表中的选项。当我在当前选择框中选择该选项时，该选项将在其他选择框下拉菜单中被禁用。这里是我的代码使用select2 4.0.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>

任何一个可以帮我吗？

来源

2017-07-18 Sasikala J

我找到了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>

来源

2017-07-18 10:41:33

使用select2 4.0.3创建下拉列表并禁用基于其他select2值的选项

回答

相关问题