html地区选择js,JavaScript实现省市区三级联动
JavaScript实现省市区三级联动
之前的文章中我们说到过如何利用JavaScript实现二级联动,这次我们来说说如何利用JavaScript实现三级联动。效果如图:
HTML代码:请选择省份:请选择省份...... 请选择城市:请选择城市...... 请选择地区:请选择地区......
JavaScript代码:// 1.创建三维数组 var provinces=[]; provinces["江苏省"]=["南京市","无锡市","苏州市"]; provinces["浙江省"]=["杭州市","宁波市"]; provinces["安徽省"]=["合肥市","马鞍山市"]; var citys=[]; citys["南京市"]=["玄武区","雨花台区","鼓楼区","秦淮区","六合区"]; citys["无锡市"]=["滨湖区","惠山区","梁溪区"]; citys["苏州市"]=["姑苏区","吴江区"]; citys["杭州市"]=["西湖区","临安区","上城区"]; citys["宁波市"]=["江北区","江东区"]; citys["合肥市"]=["蜀山区","瑶海区"]; citys["马鞍山市"]=["花山区","雨山区"]; // 2.获取元素 var oprovince = document.getElementById('province'); var ocity = document.getElementById('city'); var oarea = document.getElementById('area'); for (province in provinces) { oprovince.add(new Option(province, province))//省份下拉菜单 } oprovince.onchange = function () {//省份下拉菜单内容改变时 执行的命令 var selectvalue = oprovince.value;//获取省份下拉菜单的值 ocity.innerHTML = '请选择城市......'; oarea.innerHTML = ' 请选择市区......'; for (provincename in provinces) {//遍历省份的名称 if (provincename == selectvalue) { for (cityname in provinces[provincename]) {//遍历城市名称 ocity.add(new Option(provinces[provincename][cityname], provinces[provincename][cityname])); } } } } ocity.onchange = function () { oarea.innerHTML = ' 请选择市区......'; var cityValue = ocity.value; for (i in citys) {//i是area数组的索引值(城市名称) if (i == cityValue) { for (j in citys[i]) { oarea.add(new Option(citys[i][j], citys[i][j])); } } } } // 3.向省份菜单添加选项 for(province in provinces){ oPro.add(new Option(province,province)) } // 4.根据省份选择城市 oPro.οnchange=function(){ var sel_val=oPro.value;//获取选择的省份 oCity.innerHTML = '请选择城市......'; oArea.innerHTML = ' 请选择市区......'; for(province in provinces){ if(province == sel_val){ for(cityname in provinces[province]){ oCity.add(new Option(provinces[province][cityname],provinces[province][cityname])) } } oCity.add(new Option()) } } oCity.οnchange=function(){ var sel_val2=oCity.value;//获取选择的省份 for(city in citys){ if(province == sel_val){ for(areaname in provinces[province]){ oArea.add(new Option(provinces[province][cityname],provinces[province][cityname])) } } oCity.add(new Option()) } }
总结一下: 其实实现三级联动效果和前面实现二级联动效果基本上没太大区别,相当于是两个二级联动的“嵌套”。误区就是认为二级联动利用二维数组,三级联动就是利用三维数组。但这里其实是使用了两个二级联动进行了嵌套。
视频解析链接:
https://www.bilibili.com/video/BV1st4y1y7xs/来源:https://www.icode9.com/content-1-704851.html
html地区选择js,JavaScript实现省市区三级联动相关推荐
- JavaScript实现省市区三级联动
JavaScript实现省市区三级联动 之前的文章中我们说到过如何利用JavaScript实现二级联动,这次我们来说说如何利用JavaScript实现三级联动.效果如图: HTML代码: 请选择省份: ...
- js原生,省市区三级联动插件
js原生,省市区三级联动插件 <%@ page language="java" contentType="text/html; charset=UTF-8" ...
- html省市区选择器代码,js实现一个省市区三级联动选择框代码分享
运行效果: ================================================= 部分代码: ====================================== ...
- vue项目中使用地址选择插件v-distpicker,省市区三级联动选择
步骤: 1. npm install v-distpicker --save 2. import VDistpicker from 'v-distpicker' 3. export default { ...
- Jquery之全国省市区三级联动(无需访问服务器)
最终效果图 样式修改css select {font-size: 12px;padding: 4px;white-space: normal; vertical-align: top; outline ...
- 一款超好的省市区三级联动插件citypicher的使用(数据分从数据库获取或从js文件获取)
有兴趣的小伙伴,可以继续阅读小编下一篇博客 微服务概述添加链接描述 一篇对SpringCloud的介绍添加链接描述 SpringCloud核心组件详述添加链接描述 一篇对MySQL语句执行顺序的介绍添 ...
- web 端 省市区三级联动选择框
web 端 省市区三级联动选择框 <!DOCTYPE html> <html lang="en"> <head><meta charset ...
- JS 省市区三级联动
JS 省市区三级联动:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
- element-ui省市区三级联动:选择即改变
element-ui 省市区三级联动:选择即改变 注意: 阅读本文,经验传授: vue.js单组件引入外部或自定义的 .js文件,并调用文件内三级联动的 json数据: 自定义设置 默认地址,结合js ...
最新文章
- 公安部全面查找改革开放以来失踪被拐儿童 失踪被拐儿童父母和疑似被拐人员快去采集DNA
- jquery学习手记(9)事件基础知识
- Intel Realsense D435 深度图为什么会出现残影?(Invalid Depth Band 无效深度带)(黑洞)
- 手机安装(Fiddler)证书
- PHP用空格分割文本为数组的方法
- word 2007 文档中添加文件
- php.ini settimelimit,PHP-set_time_limit()和ini_set('max_execution_time',...)之间的区别...
- ug11 linux,UG11.0升级包MP02Win#Linux系统下载就上UG网
- LeetCode MySQL 574. 当选者
- oracle会闪,oracle闪来
- js怎么select 选中的值
- Java开发工程师的发展前景如何?
- scala中class,object,trait的区别
- 必备的海外贸易沟通工具 - intbell使用教程
- ping丢包故障处理
- 求一个图中的最大团(全连通分量) n = 40 (中途相遇法)
- ZIF-67沸石咪唑酯骨架结构材料/cas46201-07-4/2-MethylimidazoleCobaltsalt
- vue中关于生产evn.production 及开发evn.development 的环境配置说明
- 二进制换算成八进制、十进制、十六进制
- 液冷技术或成服务器散热未来趋势