select2动态更改项目

Question

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

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

[ [{"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>

Answer 1

我已经举例说明了如何做到这一点.

注意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将元素定位在页面限制之外的类.

要解决这个问题,所有需要的是removeClass('select2-offscreen')在同一元素上第二次应用select2之前添加.

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

我添加了一个新的代码示例来解决此问题.

Answer 2

我成功使用以下内容动态更新选项:

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

Answer 3

尝试使用trigger属性:

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

Answer 4

我在这里修复了缺少示例库的问题：

<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/