自己對前端js瞭解不是特別多,在項目中,遇到不少前端的問題,有時間整理一下,有不對的地方,不吝賜教,多多批評指正.css
在項目中,遇到最多的select下拉框情景,莫過於多選和單選了前端
單選是很容易理解的,多選,一樣,就是多個選擇,也很容易理解.ajax
引用select的js和css文件,自行網上下載.json
單選和多選,在項目中,數據大部分狀況下,是動態賦值的,老是離不開ajax.ide
初始化:spa
$(document).ready(function () { $("select[name='username']").select2({ placeholder: '所有', language: "zh-CN", //設置 提示語言 minimumResultsForSearch: Infinity, maximumSelectionSize : 5, width: '60%' }); });
一,單選和多選的切換code
代碼:multiple="multiple"blog
單選:ip
<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>
效果:it
多選:
<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 ];
讀取數據:
$(".jsondata").select2({ width: '60%', data: data })
<select class="jsondata"></select>
未完待續