一. 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); })
这样就可以取出相应的值了， 一次查询就够了。
谢谢!!!
