首页 文章

select2动态更改项目

提问于
浏览
56

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

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

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

6 回答

  • 60

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

  • 3

    我在这里修复了示例库的缺失:

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

  • 4

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

    注意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

    Edit:

    在当前版本的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 来解决这个问题 .

  • 22

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

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

  • 2

    尝试使用trigger属性:

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

    在我的项目中,我使用以下代码:

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

相关问题