Select2动态更改项目

我有两个链接的选择: 第一个选择的每个值决定哪些项目将在第二个选择中显示。

第二个选择的值存储在一个二维数组中:

[ [{"id":1,"text":"a"}, {"id":2,"text":"b"},...],
[{"id":"1a","text":"aa"},{"id":"1b","text":"ba"},...],
...
]

第一个选择值确定用于填充第二个选择的索引。因此，在第一个“变更”事件中，我应该能够修改项目 select-two 包含。

阅读文档时，我认为我需要使用“ data”选项... ... 但是不能确定示例如何在初始化时加载数组数据，而且如果在初始化后尝试这样做似乎也不起作用。

超文本标示语言

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>
159329 次浏览
小开
最佳答案

我已经为你们做了一个例子，告诉你们如何做到这一点。

注意 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中，class 属性将从隐藏输入转移到 select2创建的根元素中，甚至包括将元素定位在页面限制之外的 select2-offscreen类。

要解决这个问题，只需要在第二次对同一个元素应用 select2之前添加 removeClass('select2-offscreen')。

$('#attribute').select2().on('change', function() {
$('#value').removeClass('select2-offscreen').select2({data:data[$(this).val()]});
}).trigger('change');

我已经添加了一个新的 一个 href = “ http://jsfiddle.net/eGXPe/”rel = “ noReferrer”> 代码示例 来解决这个问题。

小开

我在这里修正了缺乏榜样库的问题:

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js">

Http://jsfiddle.net/bbau9/328/

小开

尝试使用触发器属性:

$('select').select2().trigger('change');
小开

对于 v4，这是一个已知的问题，在4.0中不会解决，但是有一个变通方法

小开

在我的项目中，我使用了以下代码:

$('#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部分。

小开

我正在成功地使用以下方法动态更新选项:

$control.select2('destroy').empty().select2({data: [{id: 1, text: 'new text'}]});


提交答案