如何在其他“选择选择”下拉列表的基础上动态更新“选择选择”类下拉列表的值？答案

【问题标题】：How to Dynamically Update the Values of a 'select-chosen' class Drop down on the Base of Other 'select-chosen' Drop down?如何在其他“选择选择”下拉列表的基础上动态更新“选择选择”类下拉列表的值？
【发布时间】：2015-12-01 09:55:33
【问题描述】：

我有两个下拉菜单。如果我不使用 select-chosen 类并将它们简单地用作 form-control 类，它们的 HTML 很简单，我可以通过基于第一个下拉列表的值发送 AJAX 请求来更改第二个下拉列表的值在下面的代码 sn-p 中给出：

<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 请求的下拉列表，就像我在上面的代码 sn-p 中所做的那样？

【问题讨论】：

额外的 HTML 是由于插件使用模板来替换本机 select 元素以添加所需的样式。如果您需要在实例化插件后更新 select 的选项，请查看其文档中的可用方法。应该有一些东西可以让你动态更新/刷新它们。
你能帮我如何更新下拉菜单吗？我花了很多时间，但找不到任何有用的东西。

标签： jquery css jquery-plugins jquery-chosen prototype-chosen

【解决方案1】：

一旦我们设置了值。我们必须刷新选择框。

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

我希望这会奏效。

【讨论】：