JQuery mutiselect dropdown list not working

▲
0
▼

I’m using Eric hynds mutiselect dropdown list in my MVC5 application. Im using this JQuery plug in over select2 because it supports check boxes, and some other functionality that I need. My solution has refernces to the following javascrip & css files.

jquery-2.1.3.js is added using bundle

bundles.Add(new ScriptBundle("~/bundles/jquery")
   .Include("~/Scripts/jquery-{version}.js"));

<link href="~/Content/jquery.multiselect.css" rel="stylesheet" />
<script src="~/Scripts/jquery.multiselect.min.js"></script>

How ever when the page loads I get error

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'widget'

Not sure what I'm missing. Below is my code. I know the drop down list is get loaded without any issue

<link href="~/Content/jquery.multiselect.css" rel="stylesheet" />
<script src="~/Scripts/jquery.multiselect.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#Courses1").mutiselect(
        {
            selectedText: "# of # selected"
        });
    });
</script>

@using (Html.BeginForm())
{    <div>
         @Html.ListBox("Courses1")
    </div>
}

Controller

public class PersonController : Controller
{ 
    // GET: Person/Create
    public ActionResult Create()
    {
        ViewBag.Courses1 = new MultiSelectList(GetPersons(), "ID", "Name");            
        return View();
    }
}

Edit I created new empty application in VS. and included simple HTML page. I still get the same error.

Unhandled exception at line 20, column 22 in http://localhost:52267/Scripts/jquery.multiselect.min.js

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'widget'

below is complete html page. 

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <title></title>
    <link href="Content/jquery.multiselect.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.11.2.js"></script>
    <script src="Scripts/jquery.multiselect.min.js"></script>
</head>
 <body>
    <script type="text/javascript">
     $(function () {$("#mSel").multiple({selectedText: "# of #"});});
    </script>
    <div>
        <select multiple id="mSel">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
        </select>
    </div>
 </body>

jquery
asp.net-mvc
jquery-multiselect
kendo-multiselect
asked on Stack Overflow Apr 16, 2015 by LP13 • edited Apr 17, 2015 by LP13

0 Answers

Nobody has answered this question yet.

User contributions licensed under CC BY-SA 3.0