js三级联动说明(基于JavaScript实现省市联动效果)
类别:编程学习 浏览量:1070
时间:2021-10-24 10:28:13 js三级联动说明
基于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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- js移动端菜上下滑动效果(JS实现移动端上下滑动一次一屏)
- js柯里函数的应用场景(深入详解JS函数的柯里化)
- js条件语句教学(浅谈JS如何写出漂亮的条件表达式)
- js获取微信版本号
- pythonweb和nodejs(Node与Python 双向通信的实现代码)
- extjs多选下拉框
- 延迟加载js文件
- nodejsweb服务(Nodejs实现内网穿透服务)
- dede友情链接改为logo轮播教程(dedecms广告生成JS文件和JS调用-DEDE广告优化)
- extjs radiogroup赋值和取值
- js实时获取页面宽度(JavaScript获取网页的宽高及如何兼容详解)
- js怎么防抖(JS防抖节流函数的实现与使用场景)
- 自己做的弹珠小游戏(JS实现简单打砖块弹球小游戏)
- mysql存储json的方式(MySQL中查询json格式的字段实例详解)
- nodejs怎么查看对象的全部属性(浅谈nodejs中创建cluster)
- js如何操作json字符串
- 白龙马的改编学生版,快来看看(白龙马的改编学生版)
- 萌娃唱《白龙马》走红,那生动的小表情,网友直呼 简直是戏精(萌娃唱白龙马走红)
- 朱鹤松被不断认可,凤凰传奇玲花喊话岳云鹏,索要老朱演出门票(朱鹤松被不断认可)
- 元宵晚会槽点多,芒果台上来就假唱,岳云鹏不说相声改评书了(元宵晚会槽点多)
- 岳云鹏跟凤凰传奇谈心,说出了人生中最重要的三个人,这才成功(岳云鹏跟凤凰传奇谈心)
- 爱情可以当饭吃吗(爱情能当饭吃吗)
热门推荐
- sql内连接和外连接(SQL左连接和右连接原理及实例解析)
- 云服务器是什么到底有什么用(云服务器有什么用)
- mysql冷热数据分离方案(MySQL中使用流式查询避免数据OOM)
- python怎么装opencv(Python基于opencv实现的简单画板功能示例)
- python转pdf教程(Python实现将HTML转成PDF的方法分析)
- dedecms操作(织梦DedeCMS官方关于正版版本号的严正声明)
- python停止执行的代码(python定时检测无响应进程并重启的实例代码)
- 如何将tomcat源码以maven方式运行(如何将tomcat源码以maven方式运行)
- 什么是web服务器(什么是网站服务器?服务器是做什么用的?)
- mysql模糊查询语句(mysql中like % %模糊查询的实现)