Question

我的表单下拉有一个在pageload上定义的CSS样式并且被隐藏，代码就像

＆＃13;

<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>

＆＃13;

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

将数据添加到下拉列表后，HTML看起来像

＆＃13;

<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>

＆＃13;

并且JQuery代码看起来像，而targetdropdown值将是＆＃34; City＆＃34;这里和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

您似乎正在使用CustomBoxIt jQuery插件进行自定义样式下拉列表。当您完成向div调用.refresh（）方法添加动态选项时。

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

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

Jquery错误地附加了下拉数据

1 个答案: