SELECT2改变项动态

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而且I改变#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类属性的当前版本正在从隐藏的输入转移到由创建SELECT2根元素，连select2-offscreen类哪些位置的页范围以外的元素的方式。

为了解决这个问题，多数民众赞成所有需要的是在相同的元素将选择2第二次之前添加removeClass('select2-offscreen')。

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

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

Answer 2

我解决缺乏例如图书馆的位置：

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

尝试使用触发器属性是：

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

Answer 4

V4的，这是一个已知的问题，赢得了”在4.0中解决，但有一个解决方法。检查https://github.com/select2/select2/issues/2830

Answer 5

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

$('#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'); 
}); 

尝试注释掉选择2部分。其余的代码仍然可以工作。

Answer 6

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

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