Bootstrap下拉框插件Select2使用记录

官网: 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......
}