Как динамически обновлять значения класса 'select-selected' Выпадающее меню на базе «Выбрать-Выбрать» Выпадающее?

Question

У меня есть два спуска. Если я не использую класс select-chosen и использую их просто как класс form-control, их HTML-код прост, и я могу изменить значения второго выпадающего списка, отправив запрос AJAX на основе значения 1-го падения вниз, как указано ниже. сниппет:

<select id="firsttDropDown" class='form-control'> 
    <option value='1'>Value 1</option> 
</select> 

<select id="secondDropDown" class='form-control'> 
    <option value='2'>Value 2</option> 
</select> 

$("#firstDropDown").on('change', function(e) { 
    var loc_id = e.target.value; 
    $.get('my/url/', function(data) { 
     // success data 
     $('#secondtDropDown').empty(); 
     $.each(data.list, function(index, eObj){ 
      $('#secondtDropDown').append('<option value=' + eObj.id + '>' + eObj.first_name + ' ' + eObj.last_name + '</option>'); 
     }); 
    }); 
}); 

Однако, когда я хочу, чтобы эти капли спады выглядеть лучше, используя select-chosen класс, все идет не так. Этот класс полностью изменяет HTML моих падений вниз, как это.

<select id="firstDropDown" class="select-chosen" name="firstDropDown" data-placeholder="Choose a ..." style="display: none;"> 
    <option value="1">Value 1</option> 
</select> 
<div class="chosen-container chosen-container-single" style="width: 100%;" title="" id="firstDropDown_chosen"> 
    <a class="chosen-single" tabindex="-1"> 
     <span>Vlaue 1</span> 
     <div><b></b></div> 
    </a> 
    <div class="chosen-drop"> 
     <div class="chosen-search"> 
      <input type="text" autocomplete="off"> 
     </div> 
     <ul class="chosen-results"> 
      <li class="active-result result-selected" data-option-array-index="0"> 
       Value 1 
      </li> 
     </ul> 
    </div> 
</div> 

<select id="secondDropDown" class="select-chosen" name="Visitor_user_id" style="display: none;"> 
    <option value="71">Andrew Simond</option> 
</select> 
<div class="chosen-container chosen-container-single" style="width: 100%;" title="" id="secondDropDown_chosen"> 
    <a class="chosen-single" tabindex="-1"> 
     <span>Value 1</span> 
     <div><b></b></div> 
    </a> 
    <div class="chosen-drop"> 
     <div class="chosen-search"> 
      <input type="text" autocomplete="off"> 
     </div> 
     <ul class="chosen-results"> 
      <li class="active-result result-selected" data-option-array-index="0">Andrew Simond</li> 
      <li class="active-result" data-option-array-index="1">Value 1</li> 
      <li class="active-result" data-option-array-index="2">Value 2</li> 
      <li class="active-result" data-option-array-index="3">Value 3</li> 
      <li class="active-result" data-option-array-index="4">Value 4</li> 
     </ul> 
    </div> 

Теперь мой вопрос заключается в том, что как я могу обрабатывать все это странным (для меня, не для всех вас) ищет HTML, чтобы обновить выпадающий список запроса Ajax, как я сделал в выше фрагменте кода?

Answer 1

Как только мы установим значение. мы должны обновить поле выбора.

$('select').val(123); 
$('select').trigger("liszt:updated"); 

Я надеюсь, что это сработает.