Как динамически обновлять выбранные исходные данные

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

Для того, чтобы изменить данные ВЫБ.2, я назначить новый список, который данные: указывает, но это не работает. Я все еще вижу пустые ценности. Что происходит?

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