Bootstrap multiselect and bootstrapselect components in JS Components

Bootstrap multiselect and bootstrapselect components in JS Components

The general style and functions of these two components are basically the same. This article will show you how to use these two components.

I. Component Description and API
1. The first component -- multiple-select. This component has a simple style, comprehensive documentation, and powerful functions. However, I think it is not very effective. We will put the following information on its effect presentation.

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

Ii. Multiple-select component
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, it is generally supported by mainstream browsers.

2. effect Preview
(1) Original MultiSelect

(2) initialized Multiple Select

 

(3) set, select, and disable

(4) set groups

(5) set the unselected initial values: select

(6) initialize to single-Choice

(7) set the filtering function of components

3. Sample Code
Since it is a bootstrap component, it must be supported by bootstrap. Let's take a look at the js 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"> multiple sites </label> <div class = "col-xs-2" style = "margin-top: 7px; "> <select id =" sel_search_orderstatus "style =" width: 150px "multiple =" multiple "> <option value =" 0 "> production not scheduled </option> <option value =" 5 "> production scheduled </option> <option value = "10"> locked </option> <option value = "25"> operating </option> <option value = "20"> order submission </option> <option> value = "30"> delete an order </option> <option value = "50"> decommission an order </option> </select> </div>

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

(2) Set, select, 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 groups 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 available "> <option value =" 0 "> not scheduled </option> </optgroup> <optgroup label =" launched "> <option value =" 5 "> production scheduling </option> <option value =" 10 "> locked </option> <option value =" 25 "> </option> <option value = "20"> order submission </option> </optgroup> <optgroup label = "exception"> <option value = "30"> order deletion </option> <option value = "50"> order decommission </option> </optgroup> </select> </div> $ (function () {$ ('# sel_search_orderstatus3 '). multipleSelect ({placeholder: "select "});})

(4) single answer

<Label class = "control-label col-xs-1" for = "sel_search_orderstatus4"> single choice </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 require default initial values, you can set their values during initialization. The following is the default parameter list in the source code.

Iii. Bootstrap-multiselect component
1. Sample Code
The initialization process is similar to the above. First, reference the file.

<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) initial Initialization

<Label class = "control-label col-xs-1" for = "sel_search_orderstatus"> multiple sites </label> <div class = "col-xs-2" style = "margin-top: 7px; "> <select id =" sel_search_orderstatus "style =" width: 150px "multiple =" multiple "> <option value =" 0 "> production not scheduled </option> <option value =" 5 "> production scheduled </option> <option value = "10"> locked </option> <option value = "25"> operating </option> <option value = "20"> order submission </option> <option> value = "30"> delete an order </option> <option value = "50"> decommission an order </option> </select> </div> $ (function () {$ ('# sel_search_orderstatus '). multiselect ();});

(2) Set, select, 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 "> production not scheduled </option> <option value =" 5 "selected =" selected "> production scheduled </option> <option value = "10" selected = "selected"> locked </option> <option value = "25" disabled = "disabled"> operating </option> <option value = "20" disabled = "disabled"> order submission </option> <option value = "30" disabled = "disabled" selected = "selected"> order deletion </ option> <option value = "50"> order decommission </option> </select> </div>

(3) Group

<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 available "> <option value =" 0 "> not scheduled </option> </optgroup> <optgroup label =" launched "> <option value =" 5 "> production scheduling </option> <option value =" 10 "selected =" selected "> locked </option> <option value = "25" disabled = "disabled"> order submission </option> <option value = "20"> </option> </optgroup> <optgroup label = "Exception "> <option value =" 30 "> order deletion </option> <option value =" 50 "> order decommission </option> </optgroup> </select> </ div> $ (function () {$ ('# sel_search_orderstatus3 '). multiselect ({enableCollapsibleOptGroups: true });});

The code for other effects will not be displayed one by one. The code is very simple and there is no problem in reading the documentation.

The above shows the effects of the two multiple-choice components and simple code examples. It is easy to use and has similar functions. I hope this article will be helpful for your learning.

Articles you may be interested in:

• AngularJS and bootstrap are combined to achieve dynamic loading of pop-up prompt content
• Every day, Bootstrap must learn js plug-ins
• JS component Bootstrap implementation pop-up box and prompt box effect code
• JS component Bootstrap Table row dragging implementation code
• JS component Bootstrap Table multi-row drag effect implementation code
• Detailed description of JS table component artifact bootstrap table (Basic Edition)
• JS component Form verification artifact BootstrapValidator
• JS component Bootstrap Select2 usage