一、簡介
select2是Jquery用來代替選擇框的一種組件。它讓你可以定制下拉框，並且支持搜索、標記，遠程數據源，無限滾動和其他更高級的功能。select2的下載地址為：https://select2.github.io/ 。這里使用到的是select2-4.0.0版本。下載該版本后，解壓文件，在dist目錄下有js與css文件。使用select就需要引用這些的文件。
二、使用
1、引入jQuery與select2樣式、js文件如下：
<link href="css/select2.min.css" rel="stylesheet" /> <script src="js/jquery.1.11.2.min.js"></script> <script src="js/select2.min.js"></script> <script src="js/i18n/zh-CN.js"></script>
這里用到的Jquery是1.11.2版本，zh-CN.js為select2本地化的文件。其中select2.min.css、select2.min.js與zh-Cn.js文件都是dist目錄下的文件。
2、示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>select2-4.0.0 示例</title> <link href="css/select2.min.css" rel="stylesheet" /> </head> <body> <div> select2: <select id="test1" style="width: 20%" multiple="multiple"> <option ></option> <option value="2">222222</option> <option value="3">33223333</option> <option value="4">333333</option> <option value="5">223333</option> <option value="6">444444</option> <option value="7">555555</option> <option value="8">666666</option> <option value="9">777777</option> <option value="10">98888888888888888888888888888888888777777</option> </select> <button id="clear2" >清除</button> <button id="setValue" >設置777777</button> <button id="getValue" >獲取</button> <button id="enable" >enable</button> <button id="disable" >disable</button> </div> <div> select2: <select id="test2" style="width: 20%" /><!-- 多選時加上multiple="multiple" 並在回顯時，回傳所選的值數組 --> <input id="personid" type="hidden" name="personid" /> </div> <script src="js/jquery.1.11.2.min.js"></script> <script src="js/select2.min.js"></script> <script src="js/i18n/zh-CN.js"></script> <script type="text/javascript"> $(document).ready(function(){ //靜態select渲染 $('#test1').select2({ placeholder: "請選擇", language: "zh-CN" }); $("#clear2").on("click", function () { //置空 $("#test1").val(null).trigger("change"); }); $("#setValue").on("click", function () { //設置某一個值 $("#test1").val("9").trigger("change"); }); $("#getValue").on("click", function () { //獲取選中值 alert($("#test1").val()); }); $("#disable").on("click", function () { //啟用 $("#test1").prop("disabled", true); }); $("#enable").on("click", function () { //禁用 $("#test1").prop("disabled", false); }); //select2動態加載數據 $("#test2").select2({ placeholder: "請選擇", language: "zh-CN", ajax: { url: "${ctx}/person/list.action", dataType: 'json', delay: 250, data: function (term, page) { console.log(term); return { keyword : term,//輸入的內容，會發給服務器進行查找 //以下兩行可以在數據量大的時候用到（當下拉框往下拉的時候會加載下一頁），數據量不大的時候，可以直接注釋 pagesize : 20,//頁面大小 page : page //當前頁 }; }, results: function (data, page) { var more = (page * ${tpagesize}) < data.total;//判斷是還有記錄 return { results: data.rows , more : more }; } }, escapeMarkup: function (markup) { return markup; }, // minimumInputLength: 1, formatResult: function(row) {//選中后select2顯示的 內容 return row.name; }, formatSelection: function(row) { //選擇的時候，需要保存選中的id $("#personid").val(row.id); return row.name;//選擇時需要顯示的列表內容 }, }); }); </script> </body> </html>
對於動態渲染的下拉框，請求服務器后，服務器返回的數據是json數據。json數據格式如下：
{"total":200,"rows":[{"id":"10001", "name":"zhangsan"},{"id":"10001", "name":"zhangsan"},{"id":"10001", "name":"zhangsan"},{"id":"10001",
"name":"zhangsan"},{"id":"10001", "name":"zhangsan"},{"id":"10001", "name":"zhangsan"}]}