CODEWITHSUNDEEP
javascriptjqueryhtmlcss
NaN
NaN

Reputation: 1072

Jquery appends dropdown data incorrectly

I have dropdown in my form which has a CSS style defined on pageload and is hidden and the code is like

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

I am able to successfully append the options to this drop down, however they get inserted to a drop down without my CSS style as shown in the below image enter image description here

After the data is added to drop down the HTML looks like 

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

and the JQuery code looks like and the targetdropdown value would be "City" here and the Id and values appropriately

$("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);
                       });

Can you please help me resolve the data being inserted to CSS styled drop down which is empty as you can see in the image

Upvotes: 2

Views: 250

Answers (1)

Waqar Ul Aziz
Waqar Ul Aziz

Reputation: 197

It seems you are using SelectBoxIt jQuery plugin for Custom styled dropdown list. When you done adding dynamic option to your div call .refresh() method.

Add below line at the end of your javascript code.

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

Upvotes: 1

Related Questions