我有两个链接的选择:第一个选择的每个值确定将在第二个选择中显示哪些项目 .
第二个选择的值存储在二维数组中:
[ [{"id":1,"text":"a"}, {"id":2,"text":"b"},...],
[{"id":"1a","text":"aa"},{"id":"1b","text":"ba"},...],
...
]
第一个选择值确定用于填充第二个选择的索引 . 所以在第一个“更改”事件中我应该能够修改select-two包含的项目 .
阅读文档我认为我需要使用“数据”选项...但不知道如何在初始化时加载数组数据,如果我在初始化后尝试执行相同操作,它似乎不起作用 .
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>
6 回答
对于v4,这是一个已知的问题,不会在4.0中解决,但有一个解决方法 . 检查https://github.com/select2/select2/issues/2830
我在这里修复了示例库的缺失:
http://jsfiddle.net/bbAU9/328/
我已经举例说明了如何做到这一点 .
注意js,但我也将#value更改为输入元素
并且我正在触发
change
事件以获取初始值Code Example
Edit:
在当前版本的select2中,class属性正从隐藏输入传输到select2创建的根元素,甚至是
select2-offscreen
类,它将元素定位在页面限制之外 .要解决这个问题,所有需要的是在同一元素上第二次应用select2之前添加
removeClass('select2-offscreen')
.我添加了一个新的 Code Example 来解决这个问题 .
我成功使用以下内容动态更新选项:
$control.select2('destroy').empty().select2({data: [{id: 1, text: 'new text'}]});
尝试使用trigger属性:
在我的项目中,我使用以下代码:
尝试注释掉select2部分 . 其余代码仍然有效 .