select2dynamic更改项目
我有两个链接的select：第一个select的每个值决定哪些项目将显示在第二个select。
第二个select的值存储在一个二维数组中：
[ [{"id":1,"text":"a"}, {"id":2,"text":"b"},...], [{"id":"1a","text":"aa"},{"id":"1b","text":"ba"},...], ... ] 第一个select值决定了用来填充第二个select的索引。 所以在第一个“改变”事件中，我应该可以修改包含select-two的项目。
阅读文档我想我需要使用“数据”选项…但不能确保如何加载arrays数据在初始化，似乎不工作，如果我试图做初始化后相同。
HTML
Attribute: <select name="attribute" id="attribute"> <option value="0">Color</option> <option value="1">Size</option> </select> Value: <select name="value" id="value"></select> <script> var data = [ [{"id":1,"text":"black"}, {"id":2,"text":"blue"},...], [{"id":"1","text":"9"},{"id":"1","text":"10"},...], ]; $('#attribute').select2().bind('change', function(){ // Here I need to change `#value` items. $('#value').select2('data',data[$(this).val()]); // This does not work ); $('#value').select2(); </script>
我已经向你展示了如何完成这个任务。
注意js，而且我把#value改成了一个input元素
<input id="value" type="hidden" style="width:300px"/>
而且我正在触发获取初始值的change事件
$('#attribute').select2().on('change', function() { $('#value').select2({data:data[$(this).val()]}); }).trigger('change');
代码示例
编辑：
在当前版本的select2中，类属性被从隐藏的input传送到由select2创build的根元素，甚至是将元素path定位在页面限制之外的select2-offscreen类。
要解决这个问题，所有需要的是添加removeClass('select2-offscreen')然后在同一个元素上再次应用select2。
$('#attribute').select2().on('change', function() { $('#value').removeClass('select2-offscreen').select2({data:data[$(this).val()]}); }).trigger('change');
我已经添加了一个新的代码示例来解决这个问题。
我正在成功使用以下dynamic更新选项：
$control.select2('destroy').empty().select2({data: [{id: 1, text: 'new text'}]});
尝试使用触发属性为：
$('select').select2().trigger('change');
对于v4，这是一个已知的问题，将不会在4.0中解决，但有一个解决方法。 检查https://github.com/select2/select2/issues/2830
在我的项目中，我使用以下代码：
$('#attribute').select2(); $('#attribute').bind('change', function(){ var $options = $(); for (var i in data) { $options = $options.add( $('<option>').attr('value', data[i].id).html(data[i].text) ); } $('#value').html($options).trigger('change'); });
尝试注释掉select2部分。 其余的代码仍然可以工作。
我在这里解决了缺less示例库的问题：
<link href="ajax/libs/select2/3.5.2/select2.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js">
