为什么我的 jquery 多选插件不工作

Question

我正在使用 jquery 多选插件开发一个学校项目，但该插件无法正常工作。那是我创建多选菜单的代码。

@using nsaprojeto.Controllers
@model dadosPassar

@{
    ViewData["Title"] = "Filtros1";
}
<html>  
<center>
<h1> Zona / Ap </h1>
</center>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
<body>
    <div class="container">
        <div class="col-sm-4"></div>
        <div class="col-sm-6">
    @using(Html.BeginForm("Filtros", "L_AccessPoint", FormMethod.Post))
    {
        @Html.Label("Aps:")
        <br />
        <br />
        @Html.ListBoxFor(m => m.zoneap_id, Model.zoneap, new{ @class = "listbox"})
        <br />
        <br />
        <input type="submit" value ="Submit" />
    }
           </div>
        <div class="col-sm-4">

        </div>
    </div>


    <script type="text/javascript">
            $(function () {
                $(".listbox").multiselect({
                    includeSelectAllOption: true

                });
            });
    </script>

    @if(ViewBag.Message != null)
    {
        <script type="text/javascript">
            alert("@ViewBag.Message")
        </script>
    }



</body>
</html>

这就是我在 selectItem 中放置值的方式

list.Add(new SelectListItem { Text = "ddd", Value = "1" });
            list.Add(new SelectListItem { Text = "aaa", Value = "2" });
            list.Add(new SelectListItem { Text = "bbb", Value = "3" });
            list.Add(new SelectListItem { Text = "ccc", Value = "4" });

这就是显示的输出，

没有出现 SelectAllOption，为什么会出现？

我看到了很多教程，然后所有教程都显示了类似的东西，带有复选框选项，而我的没有。

我做错了什么？？

编辑

这就是带有 get 和 post 方法的控制器代码

 [HttpGet]
        public IActionResult Filtros1()
        {
            var model = new dadosPassar();

            var list = new List<SelectListItem>();
            list.Add(new SelectListItem { Text = "ddd", Value = "1" });
            list.Add(new SelectListItem { Text = "aaa", Value = "2" });
            list.Add(new SelectListItem { Text = "bbb", Value = "3" });
            list.Add(new SelectListItem { Text = "ccc", Value = "4" });

            model.zoneap = list;

            return View(model);
        }
        [HttpPost]
        public IActionResult Filtros1(dadosPassar teste)
        {
            teste.zoneap = BindList();
            if (teste.zoneap_id != null)
            {
                List<SelectListItem> selectedteditems = teste.zoneap.Where(p => teste.zoneap_id.Contains(int.Parse(p.Value))).ToList();

                ViewBag.Message = "Selected Countries";
                foreach (var select in selectedteditems)
                {
                    select.Selected = true;
                    ViewBag.Message += select.Text + ", ";

                }
            }

            return View(teste);
        }

现在，经过一些更改后显示的内容，但是当我单击未选中的框时，不会打开带有选项的框。

这是查看源代码中显示的内容，因此值是正确的

但是当我点击该框时没有任何反应。

这就是控制台日志中显示的内容

结论：

我使用了默认的 asp.net _layout，它有一些 calls/invokes 到 js 文件，这些文件与我后来的调用冲突。非常感谢您的帮助。

Answer 1

我刚刚使用了您提供的相同链接并创建了一个快速多链接 select。一切运行都符合预期（您可以点击“运行代码片段”）

您应该检查的几件事

检查控制台日志是否有任何错误（您可以在浏览器的 DevTools 中查看）
确保在您的@Html.ListBoxFor
确保 select 元素渲染后 multiselect 函数是运行

<html>
<head>
  <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
  
  <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
  <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />

</head>
<body>
<select id="example-getting-started" class="listbox" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
</body>
<script type="text/javascript">
    $(document).ready(function() {
        $('.listbox').multiselect({
            includeSelectAllOption: true
        });
    });
</script>

</html>

编辑

确保您的控制器中有页面的 get 方法

[HttpGet]
public IActionResult Filtros1(){
    var model = new dadosPassar();

    var list = new List<SelectListItem>();
    list.Add(new SelectListItem { Text = "ddd", Value = "1" });
    list.Add(new SelectListItem { Text = "aaa", Value = "2" });
    list.Add(new SelectListItem { Text = "bbb", Value = "3" });
    list.Add(new SelectListItem { Text = "ccc", Value = "4" });

    model.zoneap = list;

    return View(model)

}

为什么我的 jquery 多选插件不工作

Why my jquery multiselect plugin not working

javascript

jquery

asp.net

asp.net-mvc

jquery-plugins