select2常用功能介绍

最新推荐文章于 2025-05-28 16:32:12 发布

天空中一颗明亮的星

最新推荐文章于 2025-05-28 16:32:12 发布

阅读量516

点赞数

CC 4.0 BY-SA版权

分类专栏： select2

本文链接：https://blog.youkuaiyun.com/ling_ling1997/article/details/86737261

select2 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用jQuery操作Select2插件，包括删除下拉选项、填充后台数据及回显多选值。通过Ajax获取数据并转换为Select2所需的json格式，实现动态更新下拉列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、删除select2中某一项数据

$("#hiltstatus option[value='1631_0']").remove();

2、从后台获取数据显示到select的下拉框中

//select2中数据格式  data:[{id:"",text:""}]json对象形式存储
	$.ajax({
		url : contextPath + '/kniBas_basBaseInfo/getList.do',
		data:{
			'fkTypeId' : '1626_9',
			'delFlag' : '0'
		},
		async : false,
		type : 'POST',
		dataType : 'json',
		success : function(d) {
			var pkKniBasBaseInfoId;
			//dept实际上就是一个json对象
			var dept = jQuery.parseJSON("[]");
			for (var de = 0; de < d.length; de++) {
				// var de =
				// "{"+"id"+":"+d[de].pkDeptId+","+"text"+":"+d[de].deptName+"}";
				var param = jQuery.parseJSON("{}");
				param.id = d[de].pkKniBasBaseInfoId;
				param.text = d[de].infoName;
				dept.push(param);
			}
			$("#infoName").select2({
				data : dept,
				multiple : true,
				placeholder : "请至少选择一个",
			});
		},

3、从后台回去数据到select框中

回显到select 框中是一组数据
在这里插入图片描述

str = rows[0].FK_KNI_BAS_BASE_INFO_ID;
var arr = str.split(",");			
$("#infoName").val(arr).trigger('change');