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

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

效果图：

运行原理和技术：

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

页面js代码：

 1 <script type="text/javascript">
 2     //加载部门
 3     function loadSysGroup(){
 4         var groups=document.getElementById("selectObj");
 5             if(groups == null ){
 6                 return;
 7             }
 8             $.ajax({
 9                 type:"POST",
10                 url:"<%=request.getContextPath() %>"+"/master/sysGroup_getOptions.action",
11                 dataType:"json",
12                 success:function(data){
13                     var options=data["options"];
14                     groups.innerHTML="<option value='0'>--请选择--</option>"+options;
15                     
16                 }
17             });
18     }
19     
20     //当页面加载完成后，加载部门
21     $(document).ready(function(){
22         loadSysGroup();
23     });
24 </script>
25 
26  <li><label>所属部门</label><select > </select></li>

View Code