javascript - Jquery 附加下拉数据不正确

Question

我的表单中有下拉菜单，它有一个在页面加载时定义的 CSS 样式并且是隐藏的，代码就像

<div class="col-md-6">
  <div class="form-group">
    <div id="City" hidden="" style="display: none;">
      <label class="control-label" for="City">City</label>
      <select name="City" id="City" class="selectboxit visible" style="display: none;"></select><span id="CitySelectBoxItContainer" class="selectboxit-container selectboxit-container" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-owns="CitySelectBoxItOptions" aria-labelledby=""><span id="CitySelectBoxIt" class="selectboxit selectboxit visible selectboxit-enabled selectboxit-btn" name="City" tabindex="0" unselectable="on" style="width: 47px;"><span class="selectboxit-option-icon-container"><i id="CitySelectBoxItDefaultIcon" class="selectboxit-default-icon" unselectable="on"></i></span>
      <span
      id="CitySelectBoxItText" class="selectboxit-text" unselectable="on" data-val="" aria-live="polite"></span><span id="CitySelectBoxItArrowContainer" class="selectboxit-arrow-container" unselectable="on"><i id="CitySelectBoxItArrow" class="selectboxit-arrow selectboxit-default-arrow" unselectable="on"></i></span></span>
        <ul id="CitySelectBoxItOptions"
        class="selectboxit-options selectboxit-list" tabindex="-1" style="min-width: 5px;" role="listbox" aria-hidden="true"></ul>
        </span>
    </div>
  </div>
</div>

我能够成功地将选项附加到此下拉列表中，但是它们会在没有我的 CSS 样式的情况下插入到下拉列表中，如下图所示

添加数据后下拉 HTML 的样子

<div id="City" hidden="" style="display: block;">
  <label class="control-label" for="City">City</label>
  <select name="City" id="City" class="selectboxit visible" style="">
    <option>--Select City--</option>
    <option value="1">City 1</option>
    <option value="3">City 11</option>
    <option value="4">City 111</option>
  </select><span id="CitySelectBoxItContainer" class="selectboxit-container selectboxit-container" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-owns="CitySelectBoxItOptions" aria-labelledby=""><span id="CitySelectBoxIt" class="selectboxit selectboxit visible selectboxit-enabled selectboxit-btn" name="City" tabindex="0" unselectable="on" style="width: 47px;"><span class="selectboxit-option-icon-container"><i id="CitySelectBoxItDefaultIcon" class="selectboxit-default-icon" unselectable="on"></i></span>
  <span
  id="CitySelectBoxItText" class="selectboxit-text" unselectable="on" data-val="" aria-live="polite"></span><span id="CitySelectBoxItArrowContainer" class="selectboxit-arrow-container" unselectable="on"><i id="CitySelectBoxItArrow" class="selectboxit-arrow selectboxit-default-arrow" unselectable="on"></i></span></span>
    <ul id="CitySelectBoxItOptions"
    class="selectboxit-options selectboxit-list" tabindex="-1" style="min-width: 5px;" role="listbox" aria-hidden="true"></ul>
    </span>
</div>

JQuery 代码看起来像这样，这里的 targetdropdown 值将是“City”，并且 Id 和值是适当的

$("div#City").toggle();
$('select[name="'+targetdropdown+'"]').empty();
           jQuery('select[name="'+targetdropdown+'"]').
         append('<option> --Select '+targetdropdown+'-- </option>');
           $.each(res[0],function(index, element) {
                 var newOption = '<option
           value="'+element.Id+'">'+element.Name+' </option>';
               jQuery('select[name="'+targetdropdown+'"]').
                          append(newOption);
                       });

你能帮我解决插入到 CSS 样式下拉列表中的数据问题吗？如图所示，它是空的

Answer 1

您似乎正在为自定义样式的下拉列表使用 SelectBoxIt jQuery 插件。当您完成向 div 调用 .refresh() 方法添加动态选项时。

在您的 javascript 代码末尾添加以下行。

$('select[name="'+targetdropdown+'"]').data("selectBox-selectBoxIt").refresh();