html页面下拉列表中动态添加后台数据（格式化数据，显示出数据的层次感）

html页面下拉列表中动态添加后台数据（格式化数据，显示出数据的层次感）

效果图：

运行原理和技术：

当页面加载完毕，利用jquery向后台发送ajax请求，去后台拼接<select></select>中的option字符串。让后将字符串响应回来，动态添加到<select>中。其中的字符串中包含了后台的数据。

页面js代码：

 <script type="text/javascript">
     //加载部门
     function loadSysGroup(){
         var groups=document.getElementById("selectObj");
             if(groups == null ){
                 return;
             }
             $.ajax({
                 type:"POST",
                 url:"<%=request.getContextPath() %>"+"/master/sysGroup_getOptions.action",
                 dataType:"json",
                 success:function(data){
                     var options=data["options"];
                     groups.innerHTML="<option value='0'>--请选择--</option>"+options;

                 }
             });
     }

     //当页面加载完成后，加载部门
     $(document).ready(function(){
         loadSysGroup();
     });
 </script>

  <li><label>所属部门</label><select id="selectObj" name="sysGroupId"> </select></li>

后台action和sercive方法（省去dao层查数据的方法，主要是体现加工字符串）

     /**action 层
      * ajax查询出所有的部门信息
     * @Title: ajaxQueryGroup
     * @Description: TODO(这里用一句话描述这个方法的作用)
     * @return
     * @return String    返回类型
     * @author 尚晓飞
     * @date 2014-9-4 上午11:36:15
      */
     public String ajaxQueryGroup(){

         try {

             String sbString=sysUserService.findQueryGroup();
             jsonObject.put("options", sbString);

         } catch (Exception e) {
             // TODO: handle exception
             e.printStackTrace();
             return "error";
         }finally{
             out.print(jsonObject);
             out.close();
         }

         return null;
     }

 /**service层的加工数据
      * 加载出组
     * @Title: findQueryGroup
     * @Description: TODO(这里用一句话描述这个方法的作用)
     * @author 尚晓飞
     * @date 2014-9-25 上午11:38:16
     * @return
     * @see org.ledger.service.SysUserService#findQueryGroup()
      */
     @Override
     public String findQueryGroup() {
         // TODO Auto-generated method stub
         StringBuffer str=new StringBuffer();
         //院属单位institute_unit  非院属单位research_center
         //第一步拼接院属单位
         str.append("<optgroup label=\"院属单位\">");//optgroup是页面分类，无值。
         MyClass myClass=new MyClass();
         myClass.handleSb("institute_unit", 0);//算是一个父id
         str.append(myClass.sb.toString());
         str.append("</optgroup>");

         //第二步拼接非院属单位
         str.append("<optgroup label=\"非院属单位\">");
         MyClass myClass2=new MyClass();
         myClass2.handleSb("research_center", 0);
         str.append(myClass2.sb.toString());
         str.append("</optgroup>");

         return str.toString();
     }

     /**
      * 内部类（加工数据的主要）递归
     * @ClassName: myClass
     * @Description: TODO(这里用一句话描述这个类的作用)
     * @author 尚晓飞
     * @date 2014-9-25 上午11:46:34
     *本示例，第一级没有加标示，数据只有两级，如果后台数据有多个级别的话，则会显示层次关系。掌握思想
      */
     class MyClass{
         StringBuffer sb=new StringBuffer();

         //拼接内容
         public void handleSb(String unitType,Integer num){
             //根据父id查询出符合条件的集合（父子关系，在数据库表中，父的主键id 是子的父级id字段的值）
             List<SysGroup> listGroups=sysGroupService.queryGroupsByType(unitType);
             //如果不为空，则进行拼接加工字符串
             if(listGroups!=null&&listGroups.size()>0){
                 int m=0;//用来记录循环的次数
                 num++;//用来记录运行该方法的次数

                 for(int i=0;i<listGroups.size();i++){
                     sb.append("<option value=\""+listGroups.get(i).getSysGroupId()+"\">");

                     //决定位置
                     //一次递归说明是一个等级，则需要层次分明，则进行加空格，至于加多少，用递归次数决定，从而显示出层次感
                     for(int j=1;j<num;j++){
                         sb.append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
                     }

                     //决定前边装饰的符号
                     if(num!=1){
                         if(m<(listGroups.size()-1)){
                             //说明循环没有到最后一次
                             sb.append("&nbsp;&nbsp;┠&nbsp;&nbsp;");
                         }else {
                             sb.append("&nbsp;&nbsp;┖&nbsp;&nbsp;");
                         }
                     }else {
                         sb.append("&nbsp;&nbsp;");
                     }

                     //添加名字
                     sb.append(listGroups.get(i).getSysGroupName());
                     sb.append("</option>");
                     //循环一次了，循环次数的标示自增1
                     m++;

                     //递归。用于添加当前组的子组（如果有，则sb会添加，如果没有，该方法运行一下，进入当前层的下一次循环）
                     handleSb(listGroups.get(i).getSysGroupId(), num);
                 }

             }
         }

     }