如何动态更新选择源数据

Question

我有两个选择输入，第一个有一个选项列表，根据选择的内容，第二个选择将更改它的数据。最初，第二个选择没有值，但它会随着用户从第一个选择中选择值而动态变化。

var sounds = {
                0:[{'id':0, 'text':'woof'}, {'id':1, 'text':'bark'}],
                1:[{'id':0, 'text':'meow'}, {'id':1, 'text':'purr'}],
                2:[{'id':0, 'text':'moo'}, {'id':1, 'text':'bellow'}]
             };
$('#select1').select2({
    data: [
               {'id':0, 'text':'DOG'},
               {'id':1, 'text':'CAT'},
               {'id':2, 'text':'COW'}
          ]
});
var select2_data = []
$('#select2').select2({
    data: select2_data
});

$('#select1').on("change", function(e) {
    data = $(this).select2('data');
    // Why doesn't this change data: in select2
    select2_data = sounds[data.id]
    $.each(select2_data, function(i, val) {
        console.log(val)
    });
});

为了更改 select2 的数据，我指定了 data: 指向的新列表，但这不起作用。我仍然看到空值。怎么回事？

Answer 1

希望这能解决这个问题。

http://jsfiddle.net/r7dhxt8e/6/

动态更新到 select2 的唯一方法是更新 select 元素选项，select2 将侦听更改并自动更新。

    $(function() {
    var select1, select2, sounds, select2data = [];
    select1 = $("#select1"), select2 = $("#select2");
    sounds = { 0:[{'id':0, 'text':'woof'}, {'id':1, 'text':'bark'}],
              1:[{'id':0, 'text':'meow'}, {'id':1, 'text':'purr'}],
              2:[{'id':0, 'text':'moo'}, {'id':1, 'text':'bellow'}]
    };

    select1.select2({
        data:[
               {'id':0, 'text':'DOG'},
               {'id':1, 'text':'CAT'},
               {'id':2, 'text':'COW'}
          ],
        width:"200px"
    });
    select2.select2({
        data:select2data,
        width: "200px"
    });

    select1.on("change", function(e) {
       var data = $(this).select2('data');
       select2data = data && sounds[data[0].id];
       setSelect2Options(select2data);
    });

    function setSelect2Options(data) {
       if(!data) return;
       var i, l, html, opt;
       for(i = 0, l = data.length; i < l; i++) {
           opt = data[i];
           html += "<option value='"+ opt.id+"'>"+ opt.text + "</option>";
       }
       if(html) {
           select2.html(html);
       }
       select2.trigger('change');
    }
});