booststrap select2的應用總結

木子小僧發表於2018-03-15

本身對前端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>
View Code

效果:

 

 

多選:

<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>
View Code

效果

 二,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>

 

未完待續

 

相關文章