基于JavaScript实现省市联动效果


Posted in Javascript onJune 22, 2021

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jquery实现select添加实现后台权限添加的效果
May 28 Javascript
简单js代码实现selece二级联动(推荐)
Feb 18 Javascript
AngularJS HTML编译器介绍
Dec 06 Javascript
JS实现跟随鼠标立体翻转图片的方法
May 04 Javascript
node安装--linux下的快速安装教程
Mar 21 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
Apr 28 Javascript
layui select 禁止点击的实现方法
Sep 05 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 Javascript
JS实现拖动模糊框特效
Aug 25 Javascript
JavaScript实现简单计时器
React实现动效弹窗组件
关于React Native 无法链接模拟器的问题
React-vscode使用jsx语法的问题及解决方法
vue3使用vue-router的完整步骤记录
一篇文章学会Vue中间件管道
Jun 20 #Vue.js
Ajax 的初步实现(使用vscode+node.js+express框架)
You might like
PHP函数学习之PHP函数点评
2012/07/05 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
jQuery UI插件实现百度提词器效果
2016/11/21 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
js实现登录与注册界面
2017/11/01 Javascript
vuex实现数据状态持久化
2019/11/11 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
python函数的5种参数详解
2017/02/24 Python
Python中单、双下划线的区别总结
2017/12/01 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
Python实现随机爬山算法
2021/01/29 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
数据库专业英语
2012/11/30 面试题
社会实践感言
2014/01/25 职场文书
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
警用民用对讲机找不同
2022/02/18 无线电
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js