JavaScript省市级联下拉菜单实例
更新时间：2017年02月14日 08:30:49 作者：梵音与笙
这篇文章主要为大家详细介绍了JavaScript省市级联下拉菜单实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
最近学了一个关于省市级联简单的小例子，贴出来与大家分享一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<select id="selProvince" onchange="changeCity()">
<option>请选择省份</option>
</select>
<select id="selCity">
<option>请选择城市</option>
</select>
<script>
function $(ID){
return document.getElementById(ID);
}
var cityList=new Array();
cityList['北京市']=['东城区','西城区','昌平区'];
cityList['河北省']=['保定','石家庄','定州'];
cityList['江苏省'] = ['南京市','苏州市','无锡市'];
cityList['浙江省'] = ['杭州市','宁波市','温州市'];
cityList['四川省'] = ['四川省','成都市'];
cityList['海南省'] = ['海口市'];
function changeCity(){
var province=$("selProvince").value;
var city=$("selCity");
city.options.length=0;
for (var i in cityList) {
if(i==province){
for (var j in cityList[i]) {
city.add(new Option(cityList[i][j],cityList[i][j]),null);
}
}
}
}
function allCity(){
var province=$("selProvince");
for (var i in cityList) {
province.add(new Option(i,i),null);
}
}
window.onload=allCity;
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JavaScript Promise.all 静态方法常见问题记录
Promise.all 是 JavaScript 中处理多个并发异步操作的强大工具,它不仅提高了程序的执行效率,还提供了清晰的结果管理方式,本文给大家介绍JavaScript Promise.all 静态方法常见问题记录,感兴趣的朋友一起看看吧2024-10-10
过滤空格，尤其是在一些注册页面比较实用，可以用js在客户端将空格过滤掉，减轻服务器端的负担，下面是实现函数2014-10-10
bootstrap弹出层有多种触发方式，以下是我用到的bootstrap的两种模态框方式，需要的的朋友参考下吧2017-05-05
这篇文章主要介绍了js分析url获取url参数，可以获取?前面部分、#及后面部分，大家看代码吧2013-12-12
这篇文章再次为大家详细介绍了JavaScript简单实现弹出拖拽窗口的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-06-06
这篇文章介绍了js实现收缩菜单效果实例代码，有需要的朋友可以参考一下2013-10-10
void(0)用于执行某些处理，但是不整体刷新页面的情况下，下面小编就给大家详细介绍js中 javascript:void(0)的含义 ，需要的朋友可以参考下2015-08-08
这篇文章主要介绍了JavaScript如何操作css，帮助大家更好的进行前端开发，优化网页，感兴趣的朋友可以了解下2020-10-10
这篇文章主要给大家介绍了关于如何利用原生js实现表单的正则验证，所有验证都通过后提交按钮才可用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要为大家详细介绍了js仿淘宝和百度文库的评分功能的相关代码和实现思路,具有一定的参考价值，需要的朋友可以参考下2016-05-05
最新评论