select2 支持多值下拉框

字號+ 編輯: Snake 修訂: 种花家 來源: CSDN博客 2023-09-11 我要說兩句(0)

站長根據網上的貼子和實際情況把部分代碼修改了一下,和原作者的經驗會有一些出入。官方文档和案例:http://select2.github.io/

html定義:

首先引入js庫

<script src="/plugins/select2/select2.min.js"></script>

在html中定義如下下拉框:

<select id="cluster" class="select2" multiple="multiple">
  <option value="1">jiesi-1</option>
    ...
  <option value="5">jiesi-8</option>
</select>

注意,上面加上multiple="multiple"就可以讓select支持多選,不加就是單選。

例子:http://select2.github.io/examples.html

初始化:

在js中加載的時候初始化select.

$("#cluster").select2();

如果需要,可以加一些事件函數:

$("#cluster").select2().on("select2:select",function(e){
    getClusterNodes($(this).val(),null);
});

使用:

設置select選中某個值:

$("#cluster").val(3);//設置選中值
$("#cluster").trigger("change");//觸發change事件,讓界面上顯示選中的值

設置select多值選中:

$("#cluster").val([2,3]).trigger("change");//設置多個值選中

設置select選中某個值,並且觸發選中事件

$("#clusterSelect").val(selectedCluster.id).trigger("change").trigger("select2:select");

獲取select選中多值的時候,會有一個細微的順序差別。其中,如果忽略順序的話:

alert($("#cluster").val());//3,4,5 //輸出選擇的value,如果有多個值之間逗號分隔

如果要記住多選框順序的話按照如下方式獲取:

var selected = $("#cluster").select2('data'); // 先獲取選擇的值
for (var i=0;i<selected.length;i++) {
    alert(selected[i].id + '->' + selected[i].text);//輸出 2->jiesi-1
}

例子:multiSelectTest.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>select 測試</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<div>
    <h1>單選測試</h1>
    <select id="single_select" style="width: 400px;">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="cc">cc</option>
        <option value="dd">dd</option>
    </select>
    <button type="button" onClick="search1();">查詢</button>
</div>

<div>
    <h1>多選測試</h1>
    <select id="multi_select" style="width: 400px;" multiple="multiple">
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="cc">cc</option>
        <option value="dd">dd</option>
    </select>
    <button type="button" onClick="search2();">查詢</button>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</body>
<script>
    $(document).ready(function() {
        $("#single_select").select2();
        $("#multi_select").select2();
    });

    function search1() {
        alert($("#single_select").val());
    }

    function search2() {
        alert($("#multi_select").val());
    }
</script>
</html>
閲完此文,您的感想如何?
  • 有用

    1

  • 沒用

    1

  • 開心

    1

  • 憤怒

    2

  • 可憐

    2

1.如文章侵犯了您的版權,請發郵件通知本站,該文章將在24小時内刪除;
2.本站標注原創的文章,轉發時煩請注明來源;
3.交流群: 2702237 13835667

相關課文
  • JS如何防止父節點的事件運行

  • nodejs編寫一個簡單的http請求客戶耑代碼demo

  • 說一則爲什麽後耑開發人員不選擇node.js的原因

  • 使用Sublime Text3 開發React-Native的配置

我要說說
網上賓友點評