jsp中select的onchange事件用法实例

这篇文章主要介绍了jsp中select的onchange事件用法,以实例形式较为详细的分析了JSP数据库查询、遍历及结合JavaScript响应鼠标事件处理select相关技巧,需要的朋友可以参考下

本文实例讲述了jsp中select的onchange事件用法。分享给大家供大家参考，具体如下：

1. <script language = "JavaScript">  
2. var onecount;  
3. onecount=0;  
4. subcat = new Array();  
5. <%  
6. int count = 0;  
7. java.sql.ResultSet rs1 = DBManage.executeQuery("select hydm,zhydm,zhymc from zhy ");//读取数据  
8. while(rs1.next())  
9. {  
10. String selhydm=rs1.getString("hydm").trim();  
11. String zhydm=rs1.getString("zhydm").trim();  
12. String zhymc=rs1.getString("zhymc").trim();  
13. %>  
14. subcat[<%=count%>] = new Array("<%=zhydm%>","<%=selhydm%>","<%=zhymc%>");//产生数组  
15. <%  
16. count = count + 1;  
17. }  
18. if(rs1!=null) DBManage.closeCOnn();  
19. %>  
20. onecount=<%=count%>;  
21. function changelocation(id)  
22. {  
23. document.form1.selzhy.length = 0;  
24. var hydm=id;  
25. var i;  
26. document.form1.selzhy.options[0] = new Option('选择子行业分类','');  
27. for (i=0;i < onecount; i++)  
28. {  
29. if (subcat[i][1] == hydm)  
30. {  
31. document.form1.selzhy.options[document.form1.selzhy.length] = new Option(subcat[i][2], subcat[i][0]);  
32. }  
33. }  
34. }  
35. </script>  
36. <table width="500" border="0" cellspacing="0" cellpadding="0" align="center">  
37. <tr>  
38. <td width="180" height="20" align="right">选择行业分类:</td>  
39. <td width="320">  
40. <select name="selhy" onChange="changelocation(document.form1.selhy.options[document.form1.selhy.selectedIndex].value)" size="1" >  
41. <option value="2">请选择行业分类</option>  
42. <%  
43. rs = DBManage.executeQuery("select * from hy");  
44. while(rs.next())  
45. {  
46. String hydm=rs.getString("hydm").trim();  
47. String hymc=rs.getString("hymc").trim();  
48. %>  
49. <option value="<%=hydm%>"><%=hymc%></option>  
50. <%  
51. }  
52. if(rs!=null) DBManage.closeCOnn();  
53. %>  
54. </select>  
55. </td>  
56. </tr>  
57. <tr>  
58. <td height="20" align="right">选择子行业分类:</td>  
59. <td>  
60. <select name="selzhy" >  
61. <option value="" selected>请选择子行业分类</option>  
62. </select>  
63. </td>  
64. </tr>  
65. </table> 
66.  
67. <form name=form1>  
68. <select name=province onchange="cityName(this.selectedIndex)">  
69. <option value="">请选择省名</option>  
70. </select>  
71. <select name=city>  
72. <option value="">请选择城名</option>  
73. </select>  
74. </form>  
75.  
76. <script language=javascript>  
77. var city1 = ["杭州", "宁波", "温州", "绍兴", "金华", "湖州"];  
78. var city2 = ["南京", "苏州", "无锡", "常州", "镇江", "徐州"];  
79. var city3 = ["合肥", "翕县", "黄山", "祁门", "休宁"];  
80. var city4 = ["南昌", "九江", "赣州", "上饶", "新余", "景德镇"];  
81. var provinceName = ["浙江", "江苏", "安徽", "江西"];  
82. function province()  
83. {  
84. var e = document.form1.province;  
85. for (var i=0; i<provinceName.length; i++)  
86. e.options.add(new Option(provinceName[i], provinceName[i]));  
87. }  
88. function cityName(n)  
89. {  
90. var e = document.form1.city;  
91. for (var i=e.options.length; i>0; i--) e.remove(i);  
92. if (n == 0) return;  
93. var a = eval("city"+ n); //得到城市的数组名  
94. for (var i=0; i<a.length; i++) e.options.add(new Option(a[i], a[i]));  
95. }  
96. function window.onload()  
97. {  
98. province(); //初始时给省名下拉菜单赋内容  
99. }  
100. </script> 

希望本文所述对大家JSP程序设计有所帮助。