动态生成选择项目

在html中，会有

其中选择项需要从数据库里取出之后动态的加入到其中。这时，可以用js来实现。

document.getElementById("grade").options.add(new Option(str1,str2));

Option是 select 中的选择项,str1 是页面中看到的描述,而str2是这一项的值,比如<option value="这里是str2">这里是str1</option>

new option()一般用在动态生成选择项目。

在select之间传递数据可以使用 onchange()函数

//动态删除select中的所有options： document.getElementById("major").options.length=0;

//动态删除select中的某一项option： document.getElementById("major").options.remove(index);

实例：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <base href="<%=basePath%>">
 5     
 6     <title>My JSP 'index.jsp' starting page</title>
 7     <meta http-equiv="pragma" content="no-cache">
 8     <meta http-equiv="cache-control" content="no-cache">
 9     <meta http-equiv="expires" content="0">    
10     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
11     <meta http-equiv="description" content="This is my page">
12     <script src="js/jquery-1.9.1.js"></script>
13     <script src="js/json.js"></script>
14     <script type="text/javascript">
15     $(function() {
16             $.ajax({
17             type: "POST",
18             url: "getCollege.action",
19             dateType: "json",
20             async : false,
21             data: {},
22             success: function(data,status){        
23                 $.each(data.collegeList,function(i,n){ 
24                 
25                      document.getElementById("college").options.add(new Option(n.name,n.id));         
26                 
27                 });
28             },//end of success
29             error:function (XMLHttpRequest, textStatus, errorThrown)
30              {
31                 alert("加载学院信息出现错误，请重新加载。");
32             }      
33          });
34     
35     });
36     
37     function getMajors(collegeId){
38     
39        $.ajax({
40             type: "POST",
41             url: "getMajor.action",
42             dateType: "json",
43             async : false,
44             data: {"collegeId":collegeId},
45             success: function(data,status){    
46             
47                 document.getElementById("major").options.length=0;   
48                 document.getElementById("major").options.add(new Option("所有专业")); 
49                
50                 $.each(data.majorList,function(i,n){ 
51                   
52                      document.getElementById("major").options.add(new Option(n.name,n.id));         
53                 
54                 });
55             },//end of success
56             error:function (XMLHttpRequest, textStatus, errorThrown)
57              {
58                 alert("加载专业信息出现错误，请重新加载。");
59             }      
60          });
61     
62     }
63     
64     </script>
65   </head>
66   
67   <body>
68   <form action="test.action">
69        <select id="college" onchange=getMajors(this.value)>
70             <option>全校</option>
71         </select>
72         <select id="major">
73             <option>所有专业</option>
74         </select>
75         <input type="submit" value="提交" />
76     </form>
77   </body>
78 </html>

View Code

posted on 2015-02-01 10:16 dobestself_994395 阅读(124) 评论(0) 编辑收藏举报