Jquery.multiselect drop-down Box Implementation code _jquery

The example of this article for everyone to share the Jquery.multiselect drop-down box implementation method for your reference, the specific contents are as follows

The first step: link The following files, if not, to download https://github.com/ehynds/jquery-ui-multiselect-widget This page, this plugin is based on jquery, So all of the 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 Two: 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 three: load plugin rendering

<script>
 
 $ (function () {
 $ ("#select_users"). MultiSelect ({
  noneselectedtext: "= = Please choose = =",
  Checkalltext: "Select All",
  Uncheckalltext: ' All not selected ',
  selectedlist:5
  
 });


</script>

Fourth Step: Refresh Page view effect

So far, basically finished. The next step is to take the value and assign the value.

Value: $ ("#select_users"). Val (); Returns an array. Because I'm using the Ajax.beginform front page, so I don't need to take a value.

Assignment: The assignment was implemented in the second step, and no other assignment was found.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.