基于JavaScript实现省市联动效果
更新时间：2021年06月22日 09:20:23 作者：妄痴梦中
这篇文章主要为大家详细介绍了JavaScript实现省市联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现省市联动效果的具体代码，供大家参考，具体内容如下
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市级联动效果</title>
</head>
<body onload="initProvince()">
省份：<select id="province" onchange="fillCity()"></select>
城市：<select id="city"></select>
<script>
/**
* 初始化省份函数
*/
function initProvince() {
//声明存储省份的数组
let provinceArr=["陕西省","四川省","河南省","山东省"];
//将省份数组动态写入到下拉列表中
//通过id获得省份列表对象
let proovinceObj=document.getElementById("province");
//设置未选择时，展示的内容
let option=new Option("---请选择省份---","");
proovinceObj.options.add(option);
//循环遍历省份数组
for (let province of provinceArr){
//创建Option对象
//参数一：列表显示的内容
//参数二：option的values属性值
let option = new Option(province,province);
//将option对象添加到provinceObj对象中
proovinceObj.options.add(option);
}
}
//创建城市数组
//声明一个用于存储城市的数组
let cityArr=new Array();
cityArr['陕西省']=['西安市','咸阳市','宝鸡市','汉中市','延安市'];
cityArr['四川省']=['成都市','达州市','广元市','绵阳市','乐山市'];
cityArr['河南省']=['郑州市','开封市','洛阳市','新乡市','焦作市'];
cityArr['山东省']=['济南市','青岛市','莱州市','烟台市','德州市'];
/**
* 根据省份填充城市
*/
function fillCity() {
//获得当前选中的省份
let provinceObj = document.getElementById("province");
let province=provinceObj.value;
//获得城市列表对象
let cityObj = document.getElementById("city");
//清空城市列表中的原有数据
cityObj.options.length=0;
//判断是否选择了省份
if (province!=""){
let cityOption = new Option("---请选择城市---","");
cityObj.options.add(cityOption);
}
//根据该省份获得对应的城市数组，遍历城市数组
for (let city of cityArr[province]){
//将每个城市填充到城市列表中
let cityOption = new Option(city,city);
cityObj.options.add(cityOption)
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
开发 Internet Explorer 右键功能表(ContextMenu)
本篇介绍如何开发 Internet Explorer 右键功能表(ContextMenu)，以 0rz.tw 缩短网址列为范例2013-07-07
这篇文章主要为大家详细介绍了JS实现手风琴特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
其实也是个偶然的机会让我想去研究一下这个效果。主要是由于有个群里的人发了个讲解这个效果的链接，当时也没怎么在意，然后过两天，突然就想起这件事，便去拉勾网一看，效果不错啊，所以就自己研究起来，现在将过程分享给大家，有需要的可以参考借鉴。2016-10-10
这篇文章主要为大家详细介绍了微信小程序实现列表条件筛选，筛选框的效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了js中将数字格式化为金额的方法，使用加减逗号处理金额，一个格式化金额的代码，有需要的朋友参考下2014-04-04
Promise 是 JS 中进行异步编程的新的解决方案(旧的是纯回调形式) ,下面这篇文章主要给大家介绍了关于JavaScript中Promise执行顺序的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-01-01
前面突然看到 Object.defineProperty,就顺道想到 Proxy,然后就想到了观察者案例,这边还没有用 javascript编写一个观察者的案例呢,顺道加入了一个 event-bus 监听事件案例,凑一起看一看不同的实现方式,需要的朋友可以参考下2023-08-08
Map与WeakMap类型在JavaScript中的使用详解
这篇文章主要介绍了Map与WeakMap类型在JavaScript中的使用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-11-11
数组是我们编程中经常使用的的数据结构之一,在处理数组时我们经常需要在数组中查找特定的值,下面这篇文章主要给大家总结介绍了关于JS判断元素是否存在数组中的5种方式,需要的朋友可以参考下2023-03-03
有时候你发出去的图片局部不想别别人看见，那么最简单的办法就是在你想要处理的地方打上马赛克，这篇文章主要介绍了js给图片打马赛克的方法示例，感兴趣的可以了解一下2021-05-05
最新评论