如何动态更新选择源数据

Posted 2023-05-07

【中文标题】如何动态更新选择源数据

【英文标题】：How to dynamically update select source data

【发布时间】：2015-07-17 13:07:18

【问题描述】：

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

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: 指向的新列表，但这不起作用。我仍然看到空值。怎么回事？

【问题讨论】：

但您不会重新分配只是在控制台中打印它。你检查过控制台吗？

使用的select2版本？

你可能会发现这篇文章很有帮助***.com/questions/16480910/…

我在这里重新分配它：select2_data =sounds[data.id]

【参考方案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');
    
);

【讨论】：

谢谢，这太完美了！