Bootstrap select多選下拉框?qū)崿F(xiàn)代碼

更新時(shí)間：2016年12月23日 11:09:11 作者：菠蘿小妹

這篇文章主要為大家詳細(xì)介紹了Bootstrap select多選下拉框?qū)崿F(xiàn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下代碼

前言

項(xiàng)目中要實(shí)現(xiàn)多選，就想到用插件，選擇了bootstrap-select。

附上官網(wǎng)api鏈接，http://silviomoreto.github.io/bootstrap-select/.

沒(méi)有中文的。對(duì)付看吧。有機(jī)會(huì)每個(gè)方法實(shí)踐一下，會(huì)總結(jié)的。我自己也等著呢。

需要引用的它們

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" >

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script>

核心選項(xiàng)

官網(wǎng)有的，期待翻譯。。。

核心方法

官網(wǎng)有的，期待翻譯。。。

實(shí)例應(yīng)用

bootstrap布局后，select多選代碼如下

<div class="form-group">
    <label class="col-sm-3 control-label">客資類型：</label>
    <div class="col-sm-4">
    <select id="usertype" name="usertype" class="selectpicker show-tick form-control" multiple data-live-search="false">
     <option value="0">蘋果</option>
     <option value="1">菠蘿</option>
     <option value="2">香蕉</option>
     <option value="3">火龍果</option>
     <option value="4">梨子</option>
     <option value="5">草莓</option>
     <option value="6">哈密瓜</option>
     <option value="7">椰子</option>
     <option value="8">獼猴桃</option>
     <option value="9">桃子</option>
    </select>
    </div>
    </div>

js代碼：

$(window).on('load', function () {
 $('#usertype').selectpicker({
 'selectedText': 'cat'
 });
});

頁(yè)面效果：

選擇后的效果如下：

獲取值， $("#XXX").val()即可

回顯操作：

用方法 $('.selectpicker').selectpicker('val', 'Mustard');

Mustard處填入數(shù)組。代碼如下：

var str='3,4,5,6';
var arr=str.split(',');
$('#usertype').selectpicker('val', arr);

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

鼠標(biāo)經(jīng)過(guò)顯示二級(jí)菜單js特效
本文章來(lái)給大家推薦一個(gè)不錯(cuò)的鼠標(biāo)經(jīng)過(guò)顯示二級(jí)菜單js特效效果，有需要了解的朋友可以參考一下
2013-08-08
JavaScript中變量提升導(dǎo)致未定義(undefined)的問(wèn)題及解決方法
在 JavaScript 中,變量提升（Hoisting）是一個(gè)相對(duì)常見(jiàn)的行為,尤其是當(dāng)你遇到 undefined 錯(cuò)誤時(shí),本文將詳細(xì)探討變量提升的概念、其對(duì)代碼執(zhí)行的影響以及如何避免因?yàn)樽兞刻嵘鴮?dǎo)致 undefined 的問(wèn)題,需要的朋友可以參考下
2024-09-09
js抽獎(jiǎng)實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)代碼效果
這篇文章主要介紹了js隨機(jī)抽獎(jiǎng)代碼效果，大家參考使用
2013-12-12
JavaScript、C# URL編碼、解碼總結(jié)
這篇文章主要介紹了JavaScript、C# URL編碼總結(jié),注意包括了encodeURI、decodeURI、encodeURIComponent、decodeURIComponent等使用需要的朋友可以參考下
2017-01-01
js實(shí)現(xiàn)延遲加載的幾種方法詳解
今天小編就為大家分享一篇關(guān)于js實(shí)現(xiàn)延遲加載的幾種方法詳解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
2019-01-01
非阻塞動(dòng)態(tài)加載javascript廣告實(shí)現(xiàn)代碼
非阻塞動(dòng)態(tài)加載javascript廣告，需要的朋友可以參考下。
2010-11-11
js實(shí)現(xiàn)點(diǎn)擊鏈接后延遲3秒再跳轉(zhuǎn)的方法
這篇文章主要介紹了js實(shí)現(xiàn)點(diǎn)擊鏈接后延遲3秒再跳轉(zhuǎn)的方法,通過(guò)javascript的setTimeout方法實(shí)現(xiàn)延遲跳轉(zhuǎn)的功能,需要的朋友可以參考下
2015-06-06
用javascrpt將指定網(wǎng)頁(yè)保存為Excel的代碼
這段代碼在服務(wù)器中沒(méi)有權(quán)限，可以保存在本地，存為htm文件，運(yùn)行即可，就可以把文本內(nèi)容存為excel文件了
2008-01-01
JavaScript中關(guān)于for循環(huán)刪除數(shù)組元素內(nèi)容時(shí)出現(xiàn)的問(wèn)題
昨天在用for循環(huán)進(jìn)行數(shù)組去重的時(shí)候出現(xiàn)的問(wèn)題小結(jié)，怎么解決這個(gè)問(wèn)題呢，今天小編通過(guò)本文給大家講解下js循環(huán)刪除數(shù)組元素的方法，一起看看吧
2016-11-11
js手機(jī)號(hào)4位顯示空格，銀行卡每4位顯示空格效果
這篇文章主要介紹了js手機(jī)號(hào)4位顯示空格，銀行卡每4位顯示空格效果，手機(jī)號(hào)和銀行卡號(hào)，按照每4位顯示一個(gè)空格的需求，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。
2017-03-03