這篇文章主要介紹了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程序設計有所幫助。