基于jQuery的select2下拉框

2018-5-18    周周

【select2簡介】
       select2.js是一個(gè)html select美化模擬類jquery插件，但是select2.js又遠(yuǎn)非簡單的模擬美化那么簡單，它還具有搜索功能，多選功能（可限制選擇數(shù)量），ajax方式加載數(shù)據(jù)，可以設(shè)置placeholder……
【引入文件】
      <linkrel="stylesheet" href="./css/select2.css">
      <scriptsrc="./js/jquery-2.1.0.js"></script>
      <scriptsrc="./js/select2.full.js"></script>
【select2的簡單用法】


  • 設(shè)置禁用狀態(tài)disabled，如：$(".js-example-disabled").prop("disabled",false);
  • 默認(rèn)值設(shè)置：$("#select2").val("1").trigger("change");
  • 多選的默認(rèn)值可以使用：$("#select2").val(["1","2"]).trigger("change"); 這樣傳遞數(shù)組過
  • select2還有豐富的自定義事件

  JavaScript

$("#select2").on("select2:open", function (e) { log("select2:open", e); });
 
$("#select2").on("select2:close", function (e) { log("select2:close", e); });
 
$("#select2").on("select2:select", function (e) { log("select2:select", e); });
 
$("#select2").on("select2:unselect", function (e) { log("select2:unselect", e); });
 
$("#select2").on("change", function (e) { log("change"); });


【select2的其他組件】

      一、多選效果
      效果圖

161511wc0em4p5ictpk0k6.gif



代碼如下
Html代碼

<div class="box1 div">

   <p>多選下拉框</p>

<select id="sel_menu1" multiple="multiple" class="form-control">

  <optgroup label="系統(tǒng)設(shè)置">

  <option value="1">用戶管理</option>

  <option value="2">角色管理</option>

  <option value="3">部門管理</option>

  <option value="4">菜單管理</option>

  </optgroup>

  <optgroup label="訂單管理">

  <option value="5">訂單查詢</option>

  <option value="6">訂單導(dǎo)入</option>

  <option value="7">訂單刪除</option>

  <option value="8">訂單撤銷</option>

  </optgroup>

  <optgroup label="基礎(chǔ)數(shù)據(jù)">

  <option value="9">基礎(chǔ)數(shù)據(jù)維護(hù)</option>

  </optgroup>

  </select>

</div>


JS代碼

$("#sel_menu1").select2({[/align]
         tags: true,
         maximumSelectionLength: 3 //最多能夠選擇的個(gè)數(shù)

      });


二、圖文結(jié)合效果
效果圖

161544vqrri760rldcbg5d.gif


代碼

Html代碼

<div class="box2 div">
     <p>圖文結(jié)合的效果</p>
     <select id="sel_menu2" class="js-example-templating js-states form-control">
          <optgroup label="系統(tǒng)設(shè)置">
  <option value="1">用戶管理</option>
   <option value="2">角色管理</option>
   <option value="1">部門管理</option>
  <option value="1">菜單管理</option>
  </optgroup>
  <optgroup label="訂單管理">
  <option value="1">訂單查詢</option>
  <option value="1">訂單導(dǎo)入</option>
   <option value="1">訂單刪除</option>
  <option value="1">訂單撤銷</option>
   </optgroup>
  <optgroup label="基礎(chǔ)數(shù)據(jù)">
  <option value="1">基礎(chǔ)數(shù)據(jù)維護(hù)</option>
  </optgroup>
      </select>
</div>

JS代碼

$("#sel_menu2").select2({
            templateResult: formatState,
            templateSelection: formatState
        });
        function formatState(state) {
            if (!state.id) {
                return state.text; 
            }
  var $state = $('<span><img src="./image/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
            );
            return $state;
        };


分享本文至：

日歷

鏈接

個(gè)人資料

存檔