booststrap select2的應用總結
阿新 • • 發佈:2018-03-15
ini 理解 one p s basic hid 設置 分享 read
View Code
View Code
本身對前端js了解不是特別多,在項目中,遇到很多前端的問題,有時間整理一下,有不對的地方,不吝賜教,多多批評指正.
在項目中,遇到最多的select下拉框情景,莫過於多選和單選了
單選是很容易理解的,多選,同樣,就是多個選擇,也很容易理解.
引用select的js和css文件,自行網上下載.
單選和多選,在項目中,數據大部分情況下,是動態賦值的,總是離不開ajax.
初始化:
$(document).ready(function () { $("select[name=‘username‘]").select2({ placeholder:‘全部‘, language: "zh-CN", //設置 提示語言 minimumResultsForSearch: Infinity, maximumSelectionSize : 5, width: ‘60%‘ }); });
一,單選和多選的切換
代碼:multiple="multiple"
單選:
<select name="username" class="js-example-basic-single" > <option value="1">老李</option> <option value="2">老王</option> <option value="3">老賴</option> <option value="4">老張</option> <option value="5">老婁</option> <option value="6">老劉</option> </select>
效果:
多選:
<select name="username" class="js-example-basic-single" multiple="multiple" > <option value="1">老李</option> <option value="2">老王</option> <option value="3">老賴</option> <option value="4">老張</option> <option value="5">老婁</option> <option value="6">老劉</option> </select>
效果
二,select2 讀取json數據:
json:
1 var data = [ 2 { 3 id: 0, 4 text: ‘老李‘ 5 }, 6 { 7 id: 1, 8 text: ‘老王‘ 9 }, 10 { 11 id: 2, 12 text: ‘老張‘ 13 }, 14 { 15 id: 3, 16 text: ‘老孫‘ 17 }, 18 { 19 id: 4, 20 text: ‘老賴‘ 21 } 22 ];View Code
讀取數據:
$(".jsondata").select2({ width: ‘60%‘, data: data })
<select class="jsondata"></select>
未完待續
booststrap select2的應用總結