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>