JS Component Bootstrap MultiSelect two major components contest _javascript skills

Two of these components, the general style and functionality are basically the same, this article will lead you to see the use of these two components.

I. Component descriptions and APIs
1, the first component--multiple-select. This component is simple in style, full in document and powerful in function. But I don't think it's a good result. The effect on it shows that we put it in the back.

2, the second component--bootstrap-multiselect. This component style is very similar to the first one, and the documentation is quite comprehensive.

Second, Multiple-select components
1. Component description
The browser support required for this component is as follows:

• IE 7+
• Chrome 8+
• Firefox 10+
• Safari 3+
• Opera 10.6+
  

Fortunately, the general mainstream browser can support.

2, Effect preview
(1) The original MultiSelect

(2) initialized multiple Select

(3) Set check and disable

(4) Set up grouping

(5) Set the unchecked initial value: Please select

(6) initialization into a single election

(7) Set the filtering function of the component

3. code example
Since it is a bootstrap component, it certainly requires bootstrap support. Let's take a look at the JS that needs to be referenced

 @*jquery*@
 <script src= "~/scripts/jquery-1.10.2.min.js" ></script>

 @*bootstrap*@
 < Script src= "~/content/bootstrap/js/bootstrap.min.js" ></script>
 <link href= "~/content/bootstrap/ Css/bootstrap.min.css "rel=" stylesheet "/>

 @*multiple-select*@ <script src=
 " ~/content/multiselect_ Wenzhixin/multiple-select-master/multiple-select.js "></script>
 <link href=" ~/content/ Multiselect_wenzhixin/multiple-select-master/multiple-select.css "rel=" stylesheet "/>

 @* page js*@
 < Script src= "~/scripts/home/index_wenzhixin.js" ></script>

(1) Original initialization

<label class= "Control-label col-xs-1" for= "Sel_search_orderstatus" > Multi-select Site </label>
   <div class= " Col-xs-2 "style=" MARGIN-TOP:7PX; " >
    <select id= "Sel_search_orderstatus" style= "width:150px" multiple= "multiple" >
    <option value= " 0 "> No scheduling </option>
    <option value=" 5 "> Discharged </option>
    <option value=" a "> Locked </ option>
    <option value= "> </option>
    <option value=" > order submission </option>
    <option value= > Order deletion </option>
    <option value= "a" > Order scrap </option>
    </select >
   </div>

$ (function () {
 $ (' #sel_search_orderstatus '). Multipleselect ();
})

(2) Set check and disable

<label class= "Control-label col-xs-1" for= "Sel_search_orderstatus2" >disabled Select</label>
   < Div class= "col-xs-2" style= "MARGIN-TOP:7PX;" >
    <select id= "Sel_search_orderstatus2" style= "width:150px" multiple= "multiple" >
    ...
    </select>
   </div>
$ (function () {
 $ (' #sel_search_orderstatus2 '). Multipleselect ();

(3) Set grouping and initial values

<label class= "Control-label col-xs-1" for= "SEL_SEARCH_ORDERSTATUS3" > Group </label>
   <div class= " Col-xs-2 "style=" MARGIN-TOP:7PX; " >
    <select id= "Sel_search_orderstatus3" style= "width:150px" multiple= "multiple" >
    <optgroup Label= "not online" >
     <option value= "0" > not scheduling </option>
    </optgroup>
    <optgroup label= "has been online ">
     <option value= 5" > Schedule </option>
     <option value= "Ten" > Locked </option>
     < Option value= "> </option>
     <option value=" > order submission </option>
    </optgroup>
    <optgroup label= "Exception" >
     <option value= "> Order deletion </option>
     <option value=" 50 " > Order scrap </option>
    </optgroup>
    </select>
   </div>

$ (function () {
 $ (' #sel_search_orderstatus3 '). Multipleselect ({
 placeholder: "Please select}")

(4) Radio

<label class= "Control-label col-xs-1" for= "SEL_SEARCH_ORDERSTATUS4" > Radio </label>
   <div class= " Col-xs-2 "style=" MARGIN-TOP:7PX; " >
    <select id= "SEL_SEARCH_ORDERSTATUS4" style= "width:150px" multiple= "multiple" >
    ...
    . </select>
   </div>
$ (function () {
 $ (' #sel_search_orderstatus4 '). Multipleselect ({
 PLACEHOLDER: "Please select",
 single:true
 })

(5) Screening

<label class= "Control-label col-xs-1" for= "SEL_SEARCH_ORDERSTATUS5" > Filter </label>
   <div class= " Col-xs-2 "style=" MARGIN-TOP:7PX; " >
    <select id= "SEL_SEARCH_ORDERSTATUS5" style= "width:150px" multiple= "multiple" >
    ...
    </select>
   </div>
$ (function () {
 $ (' #sel_search_orderstatus5 '). Multipleselect ({
 PLACEHOLDER: "Please select",
 filter:true
 })

(6) If your multiple select does not want default initial values, you can set their values at initialization time. The following is the default parameter list inside the source code.

Three, Bootstrap-multiselect components
1. code example
The initialization process is similar to the above, referencing the file first.

<script src= "~/scripts/jquery-1.10.2.min.js" ></script>

 <script src= "~/content/bootstrap/js/" Bootstrap.min.js "></script>
 <link href=" ~/content/bootstrap/css/bootstrap.min.css "rel=" Stylesheet "/>

 <script src=" ~/content/multiselect_davidstutz/js/bootstrap-multiselect.js "></" script>
 <link href= "~/content/multiselect_davidstutz/css/bootstrap-multiselect.css" rel= "stylesheet"/ >

 <script src= "~/scripts/home/index_davidstutz.js" ></script>

(1) The most original initialization

 <label class= "Control-label col-xs-1" for= "Sel_search_orderstatus" > Multi-select Site </label>
   <div class= " Col-xs-2 "style=" MARGIN-TOP:7PX; " >
    <select id= "Sel_search_orderstatus" style= "width:150px" multiple= "multiple" >
    <option value= " 0 "> No scheduling </option>
    <option value=" 5 "> Discharged </option>
    <option value=" a "> Locked </ option>
    <option value= "> </option>
    <option value=" > order submission </option>
    <option value= > Order deletion </option>
    <option value= "a" > Order scrap </option>
    </select >
   </div>

$ (function () {
 $ (' #sel_search_orderstatus '). MultiSelect ();

(2) Set check and disable

<label class= "Control-label col-xs-1" for= "Sel_search_orderstatus2" >disabled Select</label>
   < Div class= "col-xs-2" style= "MARGIN-TOP:7PX;" >
    <select id= "Sel_search_orderstatus2" style= "width:150px" multiple= "multiple" >
    <option value= "0" > No scheduling </option>
    <option value= "5" selected= "selected" > Discharged </option>
    <option value = "Ten" selected= "selected" > Locked </option>
    <option value= "a" disabled= "disabled" > in System </option >
    <option value= disabled= "disabled" > order submission </option>
    <option value= "disabled=" Disabled "selected=" selected "> Order deletion </option>
    <option value=" "> Order scrap </option>
    </ Select>
   </div>

(3) Grouping

 <label class= "Control-label col-xs-1" for= "SEL_SEARCH_ORDERSTATUS3" > Grouping </ label> <div class= "col-xs-2" style= "margin-top:7px"; > <select id= "Sel_search_orderstatus3" style= "width:150px" multiple= "multiple" > <optgroup label= "not online" &
     Gt <option value= "0" > not scheduling </option> </optgroup> <optgroup label= "Online" > <option value= "5 "> Schedule </option> <option value=" selected= "selected" > Locked </option> <option value= "Di" sabled= "Disabled" > in System </option> <option value= ">" Order submitted </option> </optgroup> <opt
    Group label= "Exception" > <option value= "> Order deletion </option> <option value=" > Order scrap </option> </optgroup> </select> </div> $ (function () {$ (' #sel_search_orderstatus3 '). MultiSelect ({en
Ablecollapsibleoptgroups:true});
}); 

Other effects of the code will not be shown, the code is very simple to see the document basically no problem.

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

These are the results of two multiple-selection components and simple code examples. As to which kind of better all by their own feeling, use is quite simple, function is basically similar, hope this article for everyone's study help.