javascript - Jquery UI.Multiselect 无法正常工作

Question

我正在使用 Jquery ui.multiselect 一切正常，但有一个小问题，当我在该页面加载我的编辑项目页面时，我想显示页面加载时选择的一些项目，我正在做以下事情

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

这是我正在使用的javascript

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

这是填充的 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>

你可以看到有四个元素被设置为被选中，但我是这样看的

现在您可以看到应该选择了 4 个项目，但只有一个。

谢谢，

Answer 1

如果你想要你的 <select>元素首先要支持多选，你必须指定它的 multiple属性:

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