javascript - Jquery appends dropdown data incorrectly -

i have dropdown in form has css style defined on pageload , hidden , code 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 able append options drop down, inserted drop down without css style shown in below image

after data added drop down html looks

<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 jquery code looks , targetdropdown value "city" here , id , 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 please me resolve data being inserted css styled drop down empty can see in image

it seems using selectboxit jquery plugin custom styled dropdown list. when done adding dynamic option div call .refresh() method.

add below line @ end of javascript code.

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