72

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

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

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

6 回答 6

67

我为你做了一个例子，展示了如何做到这一点。

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

<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');

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

于 2012-11-07T12:19:14.007 回答
35

我成功地使用以下动态更新选项：

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

于 2016-06-30T16:21:25.870 回答
11

Try using the trigger property for this:

$('select').select2().trigger('change');
于 2015-04-27T01:14:42.413 回答
7

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

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

于 2015-03-18T02:59:01.327 回答
4

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

于 2015-06-22T07:31:10.587 回答
4

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

$('#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 部分。其余的代码仍然可以工作。

于 2015-08-24T08:51:44.657 回答