Select的option 中填充其他属性值(十三)

最新推荐文章于 2023-08-04 09:00:58 发布

原创最新推荐文章于 2023-08-04 09:00:58 发布 · 3k 阅读

2 ·

CC 4.0 BY-SA版权

转载请注明出处(两个蝴蝶飞)

文章标签：

#option 中填充其他属性

JS前端小方法专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一种在前端select框中优化数据展示的方法，通过一次性查询并利用bootstrap-select插件，将员工信息及其关联数据（如部门和岗位）绑定到select选项中，实现选择时即时显示相关联信息，有效减少二次查询，提升用户体验。

忽然发现，游戏并没有那么好玩，真正好玩的是什么？人心。而如何避免别人玩弄你的心，那就是让别人不敢玩弄你的心，代价是付不起的。人神之恋，开始了。

上一章简单介绍了JS中描述等长文本的显示或隐藏(十二),如果没有看过,请观看上一章

一. select 框中添加多余的属性

在前端select 框操作时，常常会遇到这样的问题，如下图。
在这里插入图片描述
员工姓名是一个select的集合选项，选择一个员工姓名，然后去将它的任命日期和部门名称，岗位名称给查询出来。其中，员工姓名与部门名称，岗位名称是一一对应的关系。传统的做法，或者说是老蝴蝶飞以前的做法是，先填充员工的集合到员工姓名对应的select 框中，编号是value, 名称是text. 然后写一个员工姓名的改变change 事件，在改变事件中，取出选中的员工编号，再次去查询服务，根据员工编号去将部门名称和岗位名称查询出来。这是两次查询。可以简单优化一下，进行一次查询，就是在填充员工姓名时，将员工编号，员工名称，部门名称，岗位名称，均查询出来。然后将其一一对应写到select 中的option 里面。这样就可以根据选中的option 的值将其余的属性查询出来。

二. 主要操作代码

需要引入插件， bootstrap-select 插件，官网是:https://developer.snapappointments.com/bootstrap-select/ ,引入css 和js样式。
至于 bootstrap-select 插件的使用，以后会讲一下的。

<link rel="StyleSheet"
	href="../../plugins/bootstrap-select/bootstrap-select.min.css"
	type="text/css" />

	<script type="text/javascript"
		src="../../plugins/bootstrap-select/bootstrap-select.min.js"></script>

二.一根据查询值绑定元素

normalUserSelect($("#user_name"));

二.二将查询的结果绑定到元素上

function normalUserSelect(target){
	var normaldata=call("../../_rs_selectNormalUserJobAction.do", norinfo);
	//查询员工的集合，里面有员工编号和姓名，部门编号，部门名称，职位编号和职位名称等值。
	var ndata=normaldata.appdata.normal_userdeptjob_list?normaldata.appdata.normal_userdeptjob_list:[];
	//alert(ndata.length);
	// 将select选择框清空
	target.empty();	
	$.each(ndata,function(idx,item){
		// 取出每一个值
		var dcode=item.dept_code?item.dept_code:"";
		var dname=item.dept_name?item.dept_name:"";
		var djobcode=item.job_code?item.job_code:"";
		var djobname=item.job_name?item.job_name:"";
		// 以 data-* 的形式，将其他的属性填充到里面去。  如data-code 为部门编号 ,data-name 为部门名称, data-djobcode 为职位编号，data-djobname 为职位名称。
		$("<option value='"+item.user_code+"' data-code='"+dcode+"' data-name='"+dname+"' data-djobcode='"+djobcode+"' data-djobname='"+djobname+"'>"+item.user_name+"</option>").appendTo(target);		
	})
	$("<option selected='true' value=''>请选择</option>").prependTo(target);
	//进行刷新 target.selectpicker('refresh');
	target.selectpicker('refresh');
}

二.三改变事件时，取出元素进行放置

$("#user_name").on('change',function(){
	//选择的员工为空，则其他值也为空
	if(this.value==""){
		$("#odept_name").val("");
		$("#ojob_name").val("");
		return;
	}
	// 取出选中的那个元素。
	var dom=$(this).find("option:selected");
	// 以元素.data(属性) 的方式取出值， 属性为data-* 中的* 值。
	var dcode=dom.data("code");
	//console.log("取出部门编码号:"+dcode);
	var dname=dom.data("name");
	var djobname=dom.data("djobname");
	//取出部门的编号，进行设置值。
	$("#odept_name").val(dname);
	$("#ojob_name").val(djobname);
	deptCode(dcode);
})

这样就可以取出相应的值了，一次查询就够了。

谢谢!!!