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:
相关新闻>>
- Javascript 兼容 IE6、IE7、FF 的“加入收藏”“设为首页”
- 动态加载js
- 好好学一遍JavaScript 笔记(一)——基础中的基础
- 好好学一遍JavaScript 笔记(二)——encode、数组、对象创建
- 好好学一遍JavaScript 笔记(三)——StringBuffer、prototype
- 好好学一遍javaScript 笔记(四)——Attribute、HTML元素、文档碎
- 好好学一遍JavaScript 笔记(五)——正则表达式基础
- 好好学一遍JavaScript 笔记(六)——正则表达式基础二
- 好好学一遍JavaScript 笔记(七)——RegExp对象与常用正则
- 好好学一遍JavaScript 笔记(八)——冒泡型事件、捕获型事件
- 发表评论
-
- 最新评论 更多>>