基于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 相关文章推荐
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
May 10 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
Vue EventBus自定义组件事件传递
Jun 25 Javascript
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
Jul 12 Javascript
JavaScript实现简单计时器
React实现动效弹窗组件
关于React Native 无法链接模拟器的问题
React-vscode使用jsx语法的问题及解决方法
vue3使用vue-router的完整步骤记录
一篇文章学会Vue中间件管道
Jun 20 #Vue.js
Ajax 的初步实现(使用vscode+node.js+express框架)
You might like
解析coreseek for sphinx的使用
2013/06/21 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
js null,undefined,字符串小结
2010/08/21 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
JavaScript获取页面中第一个锚定文本的方法
2015/04/03 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
[04:49]2014DOTA2国际邀请赛 Newbee顺利挺进总决赛 ImbaTV独家专访
2014/07/19 DOTA
从零学Python之入门(二)基本数据类型
2014/05/25 Python
python的unittest测试类代码实例
2017/12/07 Python
python numpy格式化打印的实例
2018/05/14 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
网络专业学生个人的自我评价
2013/12/16 职场文书
工地质量标语
2014/06/12 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python