Why my jquery multiselect plugin not working-CodePudding

I´m developing a school project using jquery multiselect plugin but the plugin isn't working fine. Thats my code where i create the multiselect menu.

@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 >
        <div ></div>
        <div >
    @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 >

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

And that is how i place values in the 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" });

And thats is the output displayed,

Dont appears the SelectAllOption, why is that appening??

I see so many tutorials and all of then show something like that, with the checkbox option and mine dont have that.

I'm doing something wrong??

Edit

Thats the controller code with the get and post method

 [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);
        }

Now, after some changes that's what is displayed, but when i click in the non selected box that dont open the box with the options.

This is what shows in view-source code, so the values are correct

But when i click in the box nothing happens.

Thats is what is showing in the console log

CodePudding user response：

I've just used the same links that you have provided and created a quick multi select. Everything ran as expected (you can click on "Run code snippet")

Few things you should check

Check to see if there's any errors in the console log (you can view this in your browsers DevTools)
Make sure the class is being set correctly on your @Html.ListBoxFor
Make sure the multiselect function is running after the select element has be rendered

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

EDIT

Make sure you have a get method in your controller for the page

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

}