bootstrap-select實現下拉框多選效果

來源:酷知科普網 7.66K

在學習bootstrap實現下拉多選效果的時候,覺得該效果很好,所以拿來分享下,這裡就不詳細的描述了,直接附上程式碼給各位看看

bootstrap-select實現下拉框多選效果

操作方法

(01)最終實現的效果:

bootstrap-select實現下拉框多選效果 第2張

(02)HTML程式碼:<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" >分類: </label><div class= "col-sm-4"><select class= "form-control selectpicker" multiple><option> 請選擇</option ><option> 遊記</option ><option> 景點</option ><option> 東京</option ><option> 日本</option ><option> 香港</option ><option> 加拿大</option ></select></div><label for= "scene_title" class="col-sm-1 control-label" >主題遊: </label><div class= "col-sm-4"><select class= "form-control selectpicker" multiple><option> 請選擇</option ><option> 遊船</option ><option> 漂流避暑</option ><option> 博物館</option ><option> 影視基地</option ><option> 名勝古蹟</option ><option> 海島度假</option ></select></div><!--                         <div class="col-sm-10"> --><%--                              <form:checkboxes path="sceneTypeRelations" items="${sceneTypeMap}" /> --%><!--                         </div> --></div></div>

(03)js程式碼:define(function(require, exports, module) {var $ = require( "jquery");require( "jquery-validation/1.11.1/" );require( "jquery-validation/1.11.1/messages_bs_" );require( "bootstrap/select/" )require( "bootstrap/select/" )$(document)y( function() jQuery( &#x27;ctpicker')ctpicker({liveSearch: true,size:8});});rts = $;});

熱門標籤