c# - Why does jquery multiselect control stop working properly when dynamically filling it? -

i have code:

<select id="sstate" multiple="multiple" name="sstate" size="5">  <option value="option1">option 1</option>  <option value="option2">option 2</option>  <option value="option3">option 3</option>  <option value="option4">option 4</option>  <option value="option5">option 5</option>  <option value="option6">option 6</option>  <option value="option11">option 11</option>  <option value="option12">option 12</option>  </select>  

works perfectly, css looks expected.

however, when want fill dynamically have add runat="server" it. first line must change to:

<select id="sstate" runat="server" meta:multiple="multiple" name="sstate" size="5">  

as that, loses css formatting , looks listbox.

any idea why happening?

this issue occurs because multiselect widget appending body when partial postback. try removed menu dom initialize again this:

<script>     var pagerequest = sys.webforms.pagerequestmanager.getinstance();      pagerequest.add_endrequest(function () {         $('.ui-multiselect-menu').each(function() {             $(this).remove();         });         $('#sstate').multiselect({             multiple: false,             header: false,             noneselectedtext: false,             selectedlist: 1,             minwidth: 170         });     });  </script>