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</option>
                             <option >DGOCV</option>
                            <option selected="selected">ZQAHP</option>
                            <option selected="selected">IIFSV</option>
                             <option >asdf</option>
                             <option >RBKDBs</option>
                             <option >NLXIV</option>
                             <option >WDBTB</option>
                             <option >TTSBB</option>
                             <option >DLXMH</option>
                             <option >INOCH</option>
                             <option >NQFSH</option>
                             <option >WIKCN</option>
                             <option >BKCTM</option>
                             <option >LPKZM</option>
                             <option >;/option>
                            <option selected="selected">mduxf</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 ,

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.</option>
                             <option >DGOCV.</option>
                            <option selected="selected">ZQAHP.</option>
                            <option selected="selected">IIFSV.</option>
                             <option >asdf</option>
                             <option >RBKDBs.</option>
                             <option >NLXIV.</option>
                             <option >WDBTB.</option>
                             <option >TTSBB.</option>
                             <option >DLXMH.</option>
                             <option >INOCH.</option>
                             <option >NQFSH.</option>
                             <option >WIKCN.</option>
                             <option >BKCTM.</option>
                             <option >LPKZM.</option>
                             <option >https://google.498.</option>
                            <option selected="selected">mduxf.</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 ,

• javascript
• jquery
• jquery-ui
• jquery-plugins

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