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中的事件循环机制是一种异步处理机制，通过维护事件队列和消息队列，实现任务的分发和执行。事件循环机制由主线程和任务队列构成，主线程运行完当前任务后会检查任务队列中是否有待执行的任务，如有则执行，否则等待2023-04-04
这篇文章主要介绍了解决layui的table.checkStatus失效问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
本篇文章主要是对js保留小数点后几位的写法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
在Webpack中用url-loader处理图片和字体的问题
这篇文章主要介绍了在Webpack中用url-loader处理图片和字体的问题及解决方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-04-04
这篇文章主要为大家详细介绍了基于js实现checkbox批量选中操作,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
最近在写位操作的时候突然想到了这个问题，突然想总结一下，交换变量值的问题可能使我们学习编程语言接触到的比较早的逻辑问题，小伙伴或多或少会两种解决的方法，本文提供了七种解决的方法，下面跟着小编来一起看看吧。2016-12-12
JS用 或 || 来兼容FireFox!...2006-11-11
编辑器上传的图片太大了，把FF和IE撑的走形，所以希望图片在某些页面里要有固定大小，如果需要某个范围，用getElementByname来设定，也是一个道理：2013-08-08
ES6（ECMAScript 6,也称为ES2015）是JavaScript的一个重要更新版本,引入了许多新的语言特性和改进,使得JavaScript变得更加现代化、易读、易维护和更适合大型应用程序的开发,ES6的主要变化归纳为：语法糖、新机制、更好的语义、更多的内置对象和方法2023-11-11
ElementUI是Vue.js的一套组件库,其日期时间选择器默认是通过点击输入框来触发,本文介绍了如何自定义触发日期选择器,同时隐藏输入框,通过编写一个自定义组件CustomDatePicker.vue,可以实现点击按钮来触发日期选择器2024-10-10
最新评论