官网: https://select2.org/
github: https://github.com/select2/select2
前提：此插件依赖于jquery和bootstrap
1.初始化
写一个ul标签，加上id或者类用于标识
1.引入必需文件
<link rel="stylesheet" href="../css/select2.min.css"/>
<script src="../js/framework/jquery-2.1.1.min.js"></script>
<script src="../js/framework/select2.full.min.js"></script>
2.设置容器(加上id标识，加上类)
<select id="monitor-manage-bind-rule-select" class="form-control select2">
<option value="123">选项1</option>
<option value="456">选项2</option>
</select>
3.在js中初始化
$("#monitor-manage-bind-rule-select").select2({
placeholder: "请选择规则名",
width: "190px",
allowClear: true
});
或者初始化时传入数据
$("#monitor-manage-bind-rule-select").select2({
placeholder: "请选择规则名",
data: [{
id: 001,
text: 苹果,
other:......
}, {
id: 002,
text: 橘子,
other:......
}]
width: "190px",
allowClear: true
});
select2容器.png
不打开效果.png
打开效果.png
2.动态设置select2的选中项
$('#create-monitor-notify-group-select').select2({
placeholder: "请选择组名",
width: "183px",
allowClear: true
}).val(item.noticeId).trigger("change");
说明：#create-monitor-notify-group-select是select2渲染的元素
如果它下面的选项中有value值等于item.noticeId这个变量的, 则选中这项(并且会触发选中的事件)
3.获取单选框/多选框文本内容和值(value)
获取值
var brandId = $("#add-shop-show-brand-ul").val();
获取单选文本
var brandName = $("#add-shop-show-brand-ul").select2('data')[0].text;
获取数据对象
var data = $("#add-shop-show-brand-ul").select2('data');
for (var i =0; i < data.length; i++) {
var item = data[i];
var id = item.id;
var name = item.text;
var other = item.other......
}
