select2动态更改项目答案

【问题标题】：select2 changing items dynamicallyselect2动态更改项目
【发布时间】：2012-10-27 09:53:51
【问题描述】：

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

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

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

【问题讨论】：

向我们展示您已经拥有的代码。
添加示例，在评论中我尝试了 $('#value').select2('data',data[$(this).val()]);
stackoverflow.com/questions/16480910/…

标签： javascript jquery-select2

【解决方案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 来解决这个问题。

【讨论】：

只需将您的 jsfiddle 更新为当前的 select2，jquery 源就会破坏它。 (jsfiddle.net/pFY9Z) 您有适用于当前版本的示例吗？
为什么这不适用于使用相同数据集的多个选择输入？ (http://jsfiddle.net/eGXPe/58/)
如果您在动态更新的 select2 字段上设置 allowClear: true，则永远不会启用清除按钮。(jsfiddle.net/eGXPe/116) 有什么想法可以解决这个问题吗？
来自官方文档：“此选项仅在指定占位符时有效”。应该这样做：jsfiddle.net/eGXPe/117 我还通过在数据列表更改时重置第二个选择框的值来修复一个小错误。

【解决方案2】：

我已成功使用以下方法动态更新选项：

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

【讨论】：

我遇到的一个问题是答案是它会覆盖空选项/占位符。
如果您最初使用 "data-data=" 将数据设置在 html 标记中，则它不起作用

【解决方案3】：

尝试为此使用 trigger 属性：

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

【讨论】：

请解释它的作用以及它回答问题的原因。
先给select赋值，然后trigger改成$('select').select2().trigger('change'); $('select').select2().trigger('change');

【解决方案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/

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案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 部分。其余代码仍然有效。

【讨论】：