如何動態更新'select-selected'類的值在其他'select-selected'下拉菜單的下拉菜單中？

我有兩個下拉。如果我不使用select-chosen類並僅將它們用作form-control類，則它們的HTML很簡單，我可以通過基於第1個下拉列表的值發送AJAX請求來更改第2個下拉列表的值，如下面的代碼所示片段：如何動態更新'select-selected'類的值在其他'select-selected'下拉菜單的下拉菜單中？

<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請求更新下拉正如我上面的代碼片斷那樣嗎？

來源

2015-12-01 MKJ

額外的HTML是由於插件用於替換本地'select'元素以添加所需樣式的模板。如果您需要在實例化插件後更新選擇的選項，請檢查其文檔中的可用方法。應該有些東西可以讓你動態地更新/刷新它們。 –

你能plz幫助我如何更新下拉？我花了很多時間，但找不到任何有用的東西。 – MKJ

一旦我們設置了該值。我們必須刷新選擇框。

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

我希望這會起作用。

來源

2017-07-16 19:08:05 ramakrishna

如何動態更新'select-selected'類的值在其他'select-selected'下拉菜單的下拉菜單中？

回答

相關問題