select2 动态改变项目

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

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

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

我已经为您制作了一个示例，展示了如何做到这一点。

请注意 js，还要注意我将 #value 更改为输入元素

<input id="value" type="hidden" style="width:300px"/>

我正在触发change获取初始值的事件

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

代码示例 http://jsfiddle.net/bbAU9/

Edit:

在 select2 的当前版本中，类属性从隐藏输入转移到 select2 创建的根元素中，甚至select2-offscreen将元素定位到页面限制之外的类。

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

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

我添加了一个新的代码示例 http://jsfiddle.net/eGXPe/来解决这个问题。