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的数据，我分配了数据：指向的新列表，但这不起作用。我仍然看到空洞的价值观。发生了什么事？

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

如何动态更新选择的源数据

1 个答案: