Question

I am working with Jquery ui.multiselect every thing is working properly but there is a tiny problem that when i load my edit item page at that page i want to show some items selected on page load , i am doing the following thing

 <select id="control_1" class="multiselect" >
                    @foreach (var item in Model.Allcategories)
                    {
                        if (Model.Categories.Contains(item))
                        {
                            <option selected="selected">@item.Name</option>
                        }
                        else
                        {
                             <option >@item.Name</option>
                        }
                    }
                </select>

and this is the javascript i am using

<link href="/Content/css/ui.multiselect.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery.scrollTo-min.js" type="text/javascript"></script>
<script src="/Scripts/ui.multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function () {
  //   $("#control_1").addClass("multiselect");
     $(".multiselect").multiselect();
     $('.ui-multiselect').removeAttr('style');
 });
</script>

this is populated html

  <select id="control_1" class="multiselect" >
                            <option selected="selected">DGOCVs.com</option>
                             <option >DGOCV.com</option>
                            <option selected="selected">ZQAHP.com</option>
                            <option selected="selected">IIFSV.com</option>
                             <option >asdf</option>
                             <option >RBKDBs.com</option>
                             <option >NLXIV.com</option>
                             <option >WDBTB.com</option>
                             <option >TTSBB.com</option>
                             <option >DLXMH.com</option>
                             <option >INOCH.com</option>
                             <option >NQFSH.com</option>
                             <option >WIKCN.com</option>
                             <option >BKCTM.com</option>
                             <option >LPKZM.com</option>
                             <option >https://google.com498.com</option>
                            <option selected="selected">mduxf.com</option>
                </select>

you can see there are four elements which are set to be selected but i see like this

now as you can see there should be 4 items selected but there is only one .

Thanks ,

Answer 1

If you want your <select> element to support multiple selection in the first place, you have to specify its multiple attribute:

<select id="control_1" class="multiselect" multiple="multiple">
    <!-- ... -->
</select>