这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了 js 实现省份下拉菜单效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
2 个下拉框,选择 1 级菜单后,2 级菜单出现相应的备选项。如果没有选择则不能提交。
先创建 html 文件
- <!DOCTYPE html>
- <html>
- <head>
- <title>
- </title>
- </head>
- <body>
- <form>
- <select id="province">
- <option selected="selected">
- 请选择...
- </option>
- </select>
- <select id="city">
- <option selected="selected">
- 请选择...
- </option>
- </select>
- <button type="submit" id="where_submit" disabled="disabled">
- 提交
- </button>
- </form>
- </body>
- <script type="text/javascript">
- var provinces = ['辽宁', '北京', '上海', '吉林', '浙江'];
- //最新添加的省份放在最前面
- var choice = ['请选择...']
- var zhejiang = ['杭州', '嘉兴', '宁波', '绍兴'];
- var shanghai = ['金山', '闸北', '普陀', '徐汇'];
- var jilin = ['长春', '辽源', '吉林', '四平'];
- var beijing = ['海淀', '朝阳', '东城', '西城'];
- var liaoning = ['沈阳', '大连', '盘锦', '锦州', '辽阳', '鞍山']
- //城市排序由后到前
- var citys = new Array;
- citys[0] = choice;
- citys[1] = zhejiang;
- citys[2] = jilin;
- citys[3] = shanghai;
- citys[4] = beijing;
- citys[5] = liaoning;
- function add_option(select, option) {
- var target = document.getElementById(select);
- for (var i = option.length - 1; i >= 0; i--) {
- var add_option = document.createElement("option");
- add_option.text = option[i];
- target.add(add_option, null);
- target.lastChild.setAttribute("name", option[i]);
- }
- }
- add_option("province", provinces);
- document.getElementById("province").addEventListener("change",
- function() {
- var selevted_province = document.getElementById("province");
- var selected_city = document.getElementById("city");
- for (var i = selevted_province.length - 1; i >= 0; i--) {
- selected_city.remove(i);
- }
- var selected = selevted_province.selectedIndex;
- if (selected == 0) {
- add_option("city", citys[0]);
- document.getElementById("where_submit").setAttribute("disabled", "ture");
- } else {
- add_option("city", citys[selected]);
- document.getElementById("where_submit").removeAttribute("disabled");
- }
- })
- </script>
- </html>
来源: http://www.phperz.com/article/17/0621/327658.html