Bootstrap-select implementation of the dropdown box multi-Select effect

Bootstrap-select implementation of the dropdown box multi-Select effectListen to the Voice

• In learning bootstrap implementation of the Lado effect, feel that the effect is very good, so take to share, here is not detailed description, directly attached to the code to see you

Method/Step

2. 1

   The effect of the final implementation:

3. 2

   HTML code:

   <div class= "row" style = "margin-top:10px;" >

   <div class= "Form-group col-xs-12" >

   <label for= "Scenemodel_title" class= "col-sm-1 col-sm-offset-1 Control-label" > Categories: </label>

   <div class= "Col-sm-4" >

   <select class= "Form-control selectpicker" multiple>

   <option> Please select </option >

   <option> Travel </option >

   <option> Attractions </option >

   <option> Tokyo </option >

   <option> Japan </option >

   <option> Hong Kong </option >

   <option> Canada </option >

   </select>

   </div>

   <label for= "Scene_title" class= "Col-sm-1 Control-label" > Theme Tours: </label>

   <div class= "Col-sm-4" >

   <select class= "Form-control selectpicker" multiple>

   <option> Please select </option >

   <option> Cruise </option >

   <option> Rafting Summer </option >

   <option> Museum </option >

   <option> Film Base </option >

   <option> Places of Interest </option >

   <option> Island Resort </option >

   </select>

   </div>

   <!--<div class= "col-sm-10" >-

   <%--<form:checkboxes path= "scenetyperelations" items= "${scenetypemap}"/>--%>

   <!--</div>--

   </div>

   </div>

4. 3

   JS Code:

   Define (function (Require, exports, module) {

   var $ = require ("jquery");

   Require ("Jquery-validation/1.11.1/jquery.validate.min.js");

   Require ("Jquery-validation/1.11.1/messages_bs_zh.js");

   Require ("Bootstrap/select/bootstrap-select.min.css")

   Require ("Bootstrap/select/bootstrap-select.min.js")

   $ (document). Ready (function () {

   Focus on the first input box

   $ ("input[name=name]"). focus ();

   Registering the Validate function for Inputform

   $ ("#sceneModel"). Validate ();

   var lon = $ ("input[name=longitude]"). Val ();

   if (lon = = ",") {

   $ ("input[name=longitude]"). Val ("");

   }

   JQuery ('. Selectpicker '). Selectpicker ({

   Livesearch:true,

   Size:8

   });

   });

   Module.exports = $;

   });

Bootstrap-select implementation of the dropdown box multi-Select effect