bootstrap multiselect 多選功能實(shí)現(xiàn)方法

更新時(shí)間：2017年06月05日 10:54:58 作者：LittleFeiHu

這篇文章主要介紹了bootstrap multiselect 多選功能實(shí)現(xiàn)方法,需要的朋友可以參考下

官方教程

http://www.kuitao8.com/demo/20140224/1/bootstrap-multiselect-master/index.html

使用方法：

第一步引用樣式以及相關(guān)JS

<link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script> 
<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" rel="external nofollow" type="text/css"/>

第二步構(gòu)造Selection（注意需要設(shè)置multiple屬性，否則依然是單選模式，multiple="multiple" ）

<!-- Build your select: -->
<select class="multiselect" multiple="multiple">
 <option value="cheese">Cheese</option>
 <option value="tomatoes">Tomatoes</option>
 <option value="mozarella">Mozzarella</option>
 <option value="mushrooms">Mushrooms</option>
 <option value="pepperoni">Pepperoni</option>
 <option value="onions">Onions</option>
</select>

第三步初始化插件：

<script type="text/javascript">
 $(document).ready(function() {
  $('.multiselect').multiselect();
 });
</script>

常用方法：

select
$('#cid').multiselect('select', arr[i]); 給控件設(shè)置選中項(xiàng)

獲取值

 $('#cid').val();獲取控件所有的選中值

以上所述是小編給大家介紹的bootstrap multiselect 多選功能實(shí)現(xiàn)方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

JS 自執(zhí)行函數(shù)原理及用法
這篇文章主要介紹了JS 自執(zhí)行函數(shù)原理及技巧,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-08-08
用javascript代替marquee的滾動(dòng)字幕效果代碼
用javascript代替marquee的滾動(dòng)字幕效果代碼...
2007-04-04
原生js實(shí)現(xiàn)抽獎(jiǎng)小游戲
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)抽獎(jiǎng)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-06-06
js操作cookie保存瀏覽記錄的方法
這篇文章主要介紹了js操作cookie保存瀏覽記錄的方法,涉及JavaScript使用cookie記錄并保存用戶瀏覽網(wǎng)頁信息的實(shí)現(xiàn)技巧,需要的朋友可以參考下
2015-12-12
微信小程序全局變量功能與用法詳解
這篇文章主要介紹了微信小程序全局變量功能與用法,結(jié)合實(shí)例形式詳細(xì)分析了微信小程序全局變量的作用、定義、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-01-01
用ES6寫全屏滾動(dòng)插件的示例代碼
本篇文章主要介紹了用ES6寫全屏滾動(dòng)插件的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-05-05
原生js實(shí)現(xiàn)淘寶購物車功能
這篇文章主要向大家推薦一個(gè)原生js實(shí)現(xiàn)淘寶購物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
JS判斷瀏覽器類型與操作系統(tǒng)的方法分析
這篇文章主要介紹了JS判斷瀏覽器類型與操作系統(tǒng)的方法,結(jié)合實(shí)例形式分析了JS針對(duì)各種常見瀏覽器與操作系統(tǒng)進(jìn)行判斷的方法,需要的朋友可以參考下
2020-04-04
JS實(shí)現(xiàn)玩轉(zhuǎn)風(fēng)車
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)玩轉(zhuǎn)風(fēng)車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
JavaScript實(shí)現(xiàn)指定數(shù)量的并發(fā)限制的示例代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)指定數(shù)量的并發(fā)限制的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03