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 id="value" type="hidden" style="width:300px"/>

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

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

Code Example

修改

在当前版本的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');

我添加了一个新的 Code Example 来解决此问题。

Answer 2

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

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

Answer 3

尝试使用触发器属性：

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

Answer 4

对于v4，这是一个已知问题，但在4.0中无法解决，但有一种解决方法。查看https://github.com/select2/select2/issues/2830

Answer 5

我在这里解决了缺少示例库的问题：

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

Answer 6

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

$('#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部分。其余的代码仍然有效。

select2动态更改项目

6 个答案: