JQuery插件Select2详解

JQuery插件Select2详解

Select2是一款JQuery的下拉表插件，主要用来优化select，支持单选和多选，同时也支持分组显示、列表检索、远程获取数据等功能。

配置CSS/JS文件

在项目里直接引入CDN的地址就可以了

<!-- 加载 Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!-- 加载 Select2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js"></script>

初始化Select2

		<select id="para_list" name="para_list" class="form-control" style="width: 100%">
            <option value=""></option>
		    <option value="1">参数一</option>
			<option value="2">参数二</option>
			<option value="3">参数三</option>
			<option value="4">参数四</option>
			<option value="5">参数五</option>
			<option value="6">参数六</option>
		    <option value="7">参数七</option>
		</select>

在js中设置提示语placeholder选择框的提示语，需要注意，要想让这个提示语生效，需要select的option里边有一个value为空的option。

$('#id_select2_demo1').select2({
    placeholder: '请选择'
});

与默认的select除了样式上的区别外，最重要的是多了一个搜索框，能用来搜索option项，如果不想显示搜索框，可以通过设置：

var selectorx = $('#id_select2_demo1').select2({
    minimumResultsForSearch: -1
});

也可以通过设置项data来加载本地数据：

var sdata = [
    {id: 1, text:'OPS-COFFEE-1'},
    {id: 2, text:'OPS-COFFEE-2'},
    {id: 3, text:'OPS-COFFEE-3'}
]

$('#id_select2_demo2').select2({
    data: sdata
});

除了加载本地数据外，select2也支持加载AJAX异步获取后端数据：

var codeData = new AjaxRequest(
       compileUrl("${rc.contextPath}/demo/getParaInfo"), {},
       function(ret) {}).execute()

$('#para_list').select2({
    placeholder: '请选择',
    data: codeData.csbh,
    language: "zh-CN",
    multiple: false,
    minimumResultsForSearch: 1
    });

AJAX异步获取数据的后端操作，返回的数据中必须有id和text，这样才能被select2解析操作：

web层操作：

    @PostMapping("/getParaInfo")
	@ResponseBody
	public DataObject getParaInfo() throws AppException{
    	DataObject ret = demoService.getParaInfo();
		return ret;
	}

service层操作：

	@Override
	public DataObject getParaInfo() throws AppException {
		return demoDao.getParaInfo();
	}

dao层操作：

	@Override
	public DataObject getParaInfo() throws AppException {
	    DE de = DE.getInstance();
        de.clearSql();
        de.addSql(" select sequenceid id, csbh text ");
        de.addSql(" from *********** ");
        DataStore vds = de.query();
        DataObject vdo = DataObject.getInstance();
        vdo.put("csbh", vds);
        return vdo;
	}

多选支持，只需要在js中添加multiple=true即可,可通过maximumSelectionLength来设置多选最多选择的个数：

$('#para_list').select2({
    placeholder: '请选择',
    data: codeData.csbh,
    language: "zh-CN",
    multiple: true,
    maximumSelectionLength:3,//多选的限制个数
    allowClear: false,//是否显示清除按钮
    minimumResultsForSearch: 1
    });

还有一些常用属性：

• width:宽度，比如100%
• closeOnSelect:选中后是否关闭选择框，默认true
• tags:是否可以动态创建选项
• disable:是否禁用
• debug:是否开启debug模式

获取在select2下拉框中选择的值：

$('#para_list').select2('val')

获取在select2下拉框中选规的对象：

$('#para_list').select2('data')

如果想要拿到已选择option的text值，可以通过如下方法，以下代码中的[0]用来获取第一个对象，对单选合适，如果是多选的话需要循环获取:

$('#para_list').select2('data')[0].text

select2初始化显示的值：

# 单选情况下val为数字，这里的selectx为
$("#para_list").val(2).trigger("change");

# 多选情况下val为列表
$("#para_list").val([2,3,5]).trigger("change");

清空已经选择的值：

$("#para_list").val(null).trigger('change');

禁用select2:

$("#para_list").prop('disabled',true);;

动态添加select的option:

$('#add').click(function() {
    var _html = '<option value="9" selected>ops-coffee.cn</option>';
    $('#id_select2_demo1').append(_html).trigger('change.select2');//change.select2： 新增select数据后触发select2更新
    $('#id_select2_demo1').select2("open");
})//.select2("open")： 打开select，open改为close可动态关闭select，改为destroy可销毁select2，恢复select默认样式