Javascript实现动态菜单添加

来源：未知责任编辑：责任编辑发表时间:2013-12-22 14:55　点击:次

ASP PHP JSP JavaScript 网页设计 DIVCSS Ajax技术 HTML5

在注册信息的时候，常常需要通过下拉菜单让用户选择，而且希望用户在第一个下拉框做的选择，影响第二个下拉框的内容。有时候，如果第一个下拉框不作出选择，第二个下拉框根本不会页面上显示，为了给用户呈现一个更清晰的页面。

先来看看效果：

Html源码：
[html]
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4.
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6. <title>动态改变菜单</title>
7. <script type="text/javascript" src="jquery.js"></script>
8. <script type="text/javascript" src="SelectMenu.js"></script>
9.
10. </head>
11.
12. <body>
13. <form action="#">
14. <br/>
15. <br/>
16. <br/>
17.
18.     <div class="Address">
19.
20.         <span class="Province">Province：
21.             <select>
22.                 <option value="" selected="selected">Please Choose Province</option>
23.                 <option value="HeBei">HeBei</option>
24.                 <option value="ShanDong">ShanDong</option>
25.             </select>
26.         </span>
27.
28.         <span class="City" style="display:none">City：
29.             <select>
30.             </select>
31.         </span>
32.         <span class="Area" style="display:none">Area：