当前位置: 首页 > 工具软件 > Select2 > 使用案例 >

JQuery插件Select2详解

郑俊美
2023-12-01

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默认样式
 类似资料: