Select的option 中填充其他属性值(十三)-CFANZ编程社区

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

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

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

在前端select 框操作时，常常会遇到这样的问题，如下图。

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

员工姓名是一个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);
})