在html中,会有
<select id="grade">
<option>所有年级</option>
</select>
其中选择项需要从数据库里取出之后动态的加入到其中。这时,可以用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>