当先锋百科网

首页 1 2 3 4 5 6 7

Bootstrap Select2组件使用教程

在这里插入图片描述

文章目录

组件说明

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

引入库

代码如下（示例）：

 　 <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Content/bootstrap/js/bootstrap.js"></script>
    <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <script src="~/Content/select2-master/dist/js/select2.js"></script>
    <link href="~/Content/select2-master/dist/css/select2.css" rel="stylesheet" />

简单使用

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

// 多选
<select id="sel_menu2" class="form-control" multiple="multiple" >
     <optgroup label="系统设置">
          <option value="1">用户管理</option>
          <option value="2">角色管理</option>
     </optgroup>
     <optgroup label="订单管理">
          <option value="5">订单查询</option>
          <option value="6">订单导入</option>
     </optgroup>
 </select>
 // 单选 （默认选第一个）
 <select id="sel_menu2" class="form-control">
    <option value="">所有學校</option>
    <option value="1">用户管理</option>
    <option value="2">角色管理</option>
 </select>

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($("<option>", {value: '', text: '全部'}));
$("#sel_menu2").append($("<option>", {value: 'value1', text: 'text1'}));
$("#sel_menu2").append($("<option>", {value: 'value2', text: 'text2'}));

// 多选 - 不能有一项为空值，否则再清空时会出BUG
$("#sel_menu2").append($("<option>", {value: 'value1', text: 'text1'}));
$("#sel_menu2").append($("<option>", {value: 'value2', text: 'text2'}));

6. 清空选中值

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

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

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

7. 移除select2

总结