基于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 相关文章推荐
js下获取div中的数据的原理分析
Apr 07 Javascript
JavaScript 对象链式操作测试代码
Apr 25 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
js实现按座位号抽奖
Apr 05 Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 Javascript
JS中的多态实例详解
Oct 15 Javascript
解决vue打包之后静态资源图片失效的问题
Feb 21 Javascript
原生JS实现的轮播图功能详解
Aug 06 Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 Javascript
JavaScript实现简单计时器
React实现动效弹窗组件
关于React Native 无法链接模拟器的问题
React-vscode使用jsx语法的问题及解决方法
vue3使用vue-router的完整步骤记录
一篇文章学会Vue中间件管道
Jun 20 #Vue.js
Ajax 的初步实现(使用vscode+node.js+express框架)
You might like
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
php代码运行时间查看类代码分享
2011/08/06 PHP
php判断手机访问还是电脑访问示例分享
2014/01/20 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
动态表格Table类的实现
2009/08/26 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
npm配置国内镜像资源+淘宝镜像的方法
2018/09/07 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
VUE渲染后端返回含有script标签的html字符串示例
2019/10/28 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
简单介绍Python中的RSS处理
2015/04/13 Python
python实现人脸识别代码
2017/11/08 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
Python3常用内置方法代码实例
2019/11/18 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
道德模范先进事迹
2014/02/14 职场文书
美容院店长岗位职责
2014/04/08 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
追悼会答谢词
2015/01/05 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python