Jquery. multiselect multi-select drop-down box implementation, select drop-down box multiple select

Jquery. multiselect multi-select drop-down box implementation, select drop-down box multiple select

 

Step 1: link the following files. If not, go to this page to download https://github.com/ehynds/jquery-ui-multiselect-widget. this plug-in is based on jquery, so all basic jquery files need to be referenced.

<link rel="stylesheet" type="text/css" href="~/Scripts/jquerymultiselect/jquery-ui.css" /><link rel="stylesheet" type="text/css" href="~/Scripts/jquerymultiselect/jquery.multiselect.css" /><link rel="stylesheet" type="text/css" href="~/Scripts/jquerymultiselect/style.css" /><link rel="stylesheet" type="text/css" href="~/Scripts/jquerymultiselect/prettify.css" /><script type="text/javascript" src="~/Scripts/jquery-ui-1.8.24.min.js"></script><script type="text/javascript" src="~/Scripts/jquerymultiselect/prettify.js"></script><script type="text/javascript" src="~/Scripts/jquerymultiselect/jquery.multiselect.min.js"></script>

 

Step 2: Define html code

 <select name="Users" multiple="multiple" id="select_users">                    @foreach (DModel.Model.User item in ViewBag.users)                    {                        if (Model.Users.Contains(item.Name))                        {                            <option value="@item.Name" selected="selected">@item.Name</option>                        }                        else                        {                            <option value="@item.Name">@item.Name</option>                        }                    }                </select>

Step 3: Load plug-in rendering

<Script> $ (function () {$ ("# select_users "). multiselect ({noneSelectedText: "= select =", checkAllText: "select all", uncheckAllText: 'Do not select all ', selectedList: 5}); </script>

 

Step 4: refresh the page to view the effect

 

This is basically done. Next is the value and value assignment.

Value: $ ("# select_users"). val (); The returned value is an array. Because I use the front-end page of Ajax. BeginForm, no value is required.

Assignment: the assignment has been implemented in step 2. Other assignment methods are not found.