【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的其他组件特效】 一、多选效果 效果图 代码如下 Html代码 [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代码 [JavaScript] 纯文本查看 复制代码 $("#sel_menu1").select2({[/align]
tags: true,
maximumSelectionLength: 3 //最多能够选择的个数
}); 二、图文结合效果 效果图 Html代码 [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代码 [JavaScript] 纯文本查看 复制代码 $("#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;
};三、模糊查询效果 效果如图，详细代码请下载附件
| 
收藏
淘帖
踩
