Javascript实现动态菜单添加

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

先来看看效果：

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：
33.             <select>
34.             </select>
35.         </span>
36.         <br/>
37.          <br/>
38.         <span class="AddressSelect" style="display:none">
39.         </span>
40.     </div>
41.
42. </form>
43. </body>
44. </html>

Javascript源码
[javascript]
1. $(document).ready(function () {
2.
3.     //找到三个下拉框
4.     var ProvinceSelect = $(".Province").children("select");
5.     var CitySelect = $(".City").children("select");
6.     var AreaSelect = $(".Area").children("select");
7.     var AddressSelect=$(".AddressSelect");
8.
9.     //给第二个下拉框注册事件
10.     ProvinceSelect.change(function () {
11.
12.         //1、获取当前下拉框的值
13.          var ProvinceValue = $(this).val();
14.         //1.1只要第一个下拉框内容有变化，第三个下拉框就要隐藏起来
15.         AreaSelect.parent().hide();
16.         AddressSelect.hide();
17.         AddressSelect.html("");
18.         //2、如果值不为空，则显示城市下拉框
19.          if (ProvinceValue != "") {
20.                    CitySelect.html("");
21.                    $("<option value=''>Please Choose City</option>").appendTo(CitySelect);
22.                     switch(ProvinceValue)
23.                        {
24.                         //实际项目中，这个城市数组肯定是在服务器获取的，这里为了简便，我就直接自定义了一个数组
25.                         //如果追求完美，这里还可以加一道缓存，防止重复获取
26.                        case "HeBei":
27.                             var CityOfHeBei=["ShiJiaZhuang","CangZhou","LangFang"];
28.                             for(var i=0;i<CityOfHeBei.length;i++){
29.                                 $("<option value='"+CityOfHeBei[i]+"'>"+CityOfHeBei[i]+"</option>").appendTo(CitySelect);
30. &nbs

补充：web前端 , JavaScript ,