如何動態更新選擇源數據

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/

動態更新，以選擇2的唯一辦法是更新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'); 
    } 
});