基于jQuery的select2下拉框

2018-5-18 Mechau 前端技术资源

select2简介】
       select2.js是一个html select美化模拟类jquery插件,但是select2.js又远非简单的模拟美化那么简单,它还具有搜索功能,多选功能(可限制选择数量),ajax方式加载数据,可以设置placeholder……
【引入文件】
      <linkrel="stylesheet" href="./css/select2.css">
      <scriptsrc="./js/jquery-2.1.0.js"></script>
      <scriptsrc="./js/select2.full.js"></script>
select2的简单用法】


  • 设置禁用状态disabled,如:$(".js-example-disabled").prop("disabled",false);
  • 默认值设置:$("#select2").val("1").trigger("change");
  • 多选的默认值可以使用:$("#select2").val(["1","2"]).trigger("change"); 这样传递数组过
  • 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="系统设置">
  <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">订单导入</option>
  <option value="7">订单删除</option>
  <option value="8">订单撤销</option>
  </optgroup>
  <optgroup label="基础数据">
  <option value="9">基础数据维护</option>
  </optgroup>
  </select>
</div>


JS代码

$("#sel_menu1").select2({[/align]
         tags: true,
         maximumSelectionLength: 3 //最多能够选择的个数

      });


二、图文结合效果
效果图
161544vqrri760rldcbg5d.gif


代码

Html代码

<div class="box2 div">
     <p>图文结合的效果</p>
     <select id="sel_menu2" class="js-example-templating js-states form-control">
          <optgroup label="系统设置">
  <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">订单导入</option>
   <option value="1">订单删除</option>
  <option value="1">订单撤销</option>
   </optgroup>
  <optgroup label="基础数据">
  <option value="1">基础数据维护</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;
        };



Powered by emlog 京ICP备12006971号-1 sitemap