首页 前端知识 select2 下拉框插件简单例子(jquery)

select2 下拉框插件简单例子(jquery)

2024-05-10 22:05:03 前端知识 前端哥 88 736 我要收藏

我一般用他来做多选下拉框,如图

首先写一个<select>标签:jc_selDept

<td class="formValue">
	<input type="text" id="jc_smallDept" name="jc_smallDept" style="display:none;" />
	<input type="text" id="jc_sdeptName" name="jc_sdeptName" style="display:none;" />
	<!-- 上面两个标签可以用来存select的val和text -->
	
	<select id="jc_selDept" name="jc_selDept" multiple></select>
</td>

然后js里面初始化插件:

//用ddata数据初始化多选下拉框
$("#jc_selDept").select2({
	placeholder: '请选择',
	data: ddata,
	multiple: true,
    maximumSelectionLength: 2,
	minimumResultsForSearch: -1
});

这里面的ddata是一个数组,如
var ddata = [{ id: 1, text: '部门1'},{ id: 2, text: '部门2'},{ id: 2, text: '部门3'}];
这个ddata可以用ajax获取后台数据。

读取select2的选中项:

var selObj = $('#jc_selDept').select2('data');  //选中项,是一个数组
var sted = '';
var stxt = '';

$.each(selObj, function (ind, val) {
	sted += val.id; 
	stxt += val.text; 
	//可以用foreach循环读取出选中项
});

赋值select2选中项

arr = F_JC_DeptCode.split(",");   //用逗号隔开的字符串
$('#jc_selDept').val(arr).trigger('change'); 

清空select2选中项

$('#jc_selDept').val(null).trigger('change'); 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8028.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!