javascript ecmascript Bootstrap Select2组件使用教程

文章目录

组件说明引入库简单使用

总结

组件说明

Select2使用示例地址：https://select2.github.io/examples.html Select2源码：https://github.com/select2/select2

Select2依赖于jquery和bootstrap，需要提前引入

引入库

代码如下（示例）：

简单使用

1. 设置容器html ( 加上id标识，加上类名 )：

// 多选

用户管理

角色管理

订单查询

订单导入

// 单选 （默认选第一个）

所有學校

用户管理

角色管理

2. 注册select2初始化（多选）

//多选

$("#sel_menu2").select2({

placeholder: "请选择规则名",

tags: true,

width: "190px",

allowClear: true,

maximumSelectionLength: 3 //最多能够选择的个数

});

// 或者初始化并设置选项

$("#sel_menu2").select2({

placeholder: "请选择规则名",

data: [{

id: 001,

text: 苹果,

other:......

}, {

id: 002,

text: 橘子,

other:......

}]

allowClear: true

});

3. 获取选中的值

$('#sel_menu2').select2('val');

$('#sel_menu2').select2('data');

$('#sel_menu2').val();

$('#sel_menu2').text();

4. 设置select2的选中值

//单选：

$('#sel_menu2').select2("val", "value1"); //或

$("#sel_menu2").val("value1").trigger("change");

//多选：

$('#sel_menu2').select2("val", ["value1" ,"value2"]); //或

$("#sel_menu2").val(['value1','value2']).trigger("change");

//Select2 4.1以后使用：

$('#sel_menu2').val("value to select").trigger("change");

5. 设置下拉列表

// 单选 - 必须有一项为空值，否则默认选择第一项（如果必须选择一项可以不设置空值）

$("#sel_menu2").append($("", {value: '', text: '全部'}));

$("#sel_menu2").append($("", {value: 'value1', text: 'text1'}));

$("#sel_menu2").append($("", {value: 'value2', text: 'text2'}));

// 多选 - 不能有一项为空值，否则再清空时会出BUG

$("#sel_menu2").append($("", {value: 'value1', text: 'text1'}));

$("#sel_menu2").append($("", {value: 'value2', text: 'text2'}));

6. 清空选中值

$('#sel_menu2').select2('val', '');

$('#sel_menu2').select2('data', null);

$("#sel_menu2").empty();

7. 移除select2

$("#sel_menu2-id").select2("destroy");

总结

相关文章

 您阅读本篇文章共花了：