<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>无标题文档</title>

</head>

<body>

    <form name="form1" method="post" action="login.php">

                国家：<select name="country" id="country">

            <option value="0">请选择国家</option>

            <option value="1">中国</option>

            <option value="2">美国</option>

            <option value="3">法国</option>

            <option value="4">意大利</option>

        </select>

                省份：<select name="province" id="province">

            <option value="0">请选择省/城市</option>

        </select>

        城市：<select name="city" id="city">

            <option value="0">请选择城市/地区</option>

        </select>

    </form>

</body>

<script type="text/javascript">

    var arr_province = ["请选择省/城市", "北京市", "上海市", "天津市", "重庆市", "深圳市", "广东省"];

    var arr_city = [

        ["请选择城市/地区"],

        ["东城区", "西城区", "朝阳区", "宣武区", "昌平区", "大兴区", "丰台区", "海淀区"],

        ['宝山区', '长宁区', '丰贤区', '虹口区', '黄浦区', '青浦区', '南汇区', '徐汇区', '卢湾区'],

        ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'],

        ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'],

        ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'],

        ['广州市', '惠州市', '汕头市', '珠海市', '佛山市', '中山市', '东莞市']

    ];

    var country = document.getElementById('country');

    var province = document.getElementById('province');

    var city = document.getElementById('city');

    // 添加国家监听事件

    country.addEventListener('change',function() {

        let html = '';

        if(this.value == 1){

            arr_province.forEach((ele,index) => {

                html += `

                <option value="${index}">${ele}</option>

                `

            })

        }else{

            html = '<option value="0">请选择省/城市</option>'

        }

        province.innerHTML = html;

    })

    // 添加城市监听事件

    province.addEventListener('change',function(){

        let html = "";

        arr_city[this.value].forEach((ele,index) => {

            html += `

            <option value="${index}">${ele}</option>

            `

        })

        city.innerHTML = html;

    })

</script>

</html>

JS案例 - 城市三级联动的更多相关文章

  1. JS全国城市三级联动

    HTML <select id="s_province" name="s_province"></select> <select ...

  2. jquery 城市三级联动

    js代码 /*城市三级联动 * @method cityChange * @param allProvince,allCity,allDistrict */ function cityChange(p ...

  3. 转: javascript实现全国城市三级联动菜单代码

    <html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...

  4. 全国城市三级联动 html+js

    全国城市三级联动,没有css,所以屏幕的自适应必须自己想办法,手机端慎用(最好不要用,因为有些我也说不出的展示问题). html页面 <!DOCTYPE html> <html> ...

  5. 城市三级联动 AJAX-原生js封装

    话不多说我们先来一张效果图给大家看一下: html代码如下: <!DOCTYPE html><html lang="en"><head> < ...

  6. JS实现年月日三级联动+省市区三级联动+国家省市三级联动

    开篇随笔:最近项目需要用到关于年月日三级联动以及省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例或者只有单纯的js还不完整,却很难找到详细的具体数据(baidu搜索都 ...

  7. 【原生js】原生js的省市区三级联动

    html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  8. Ajax 案例之三级联动

    每次在博客园网站写博客,格式真的好难搞,还望好心人告知更好的编辑工具.接下来进入正题:三级联动(其效果演示可看我的博文Ajax 学习总结 末尾). 数据表设计(Oracle) 新建数据表 Employ ...

  9. Ajax案例：三级联动查询员工的信息(三张表进行内连接)

    需求分析: 通过数据库连接池,可以查询到数据库中员工的各种信息,通过点击下拉框的方式实现三级联动,即:没有点击city下拉框,后面两个下拉框中没有值,这样,点击city下拉框,department下拉 ...

随机推荐

  1. 浅谈JSON与与JS相关的JSON函数

    本文内容主要引用在微信公众号上看到的一片文章,因为自己对Json了解不是很深入,所以就整理出这篇博文与大家分享! 一. JSON是一种格式,基于文本,优于轻量,用于交换数据 1.一种数据格式 数据的传 ...

  2. IIS 登录失败 该登陆名来自不受信任的域,不能与windows身份认证一起使用

    原文:https://blog.csdn.net/hhw199112/article/details/80234462 错误: 登录失败 该登陆名来自不受信任的域,不能与windows身份认证一起使用 ...

  3. IE和火狐的事件机制有什么区别

    1.IE的事件流是冒泡流,火狐支持冒泡流和捕获流. 2.阻止事件冒泡:IE---e.cancelBubble = true;    火狐---e.stopPropagation();

  4. 洛谷 P1508

    P1508 所属知识点:DP 主要题意: 就是求一个矩阵从下边走到上边,可以走自己前方或左前方或右前方. 问走到上边一共经过的路径和. 类型题:P1216 解题思路: 参考上边的类型题(因为比较简单) ...

  5. 【JZOJ6239】【20190629】智慧树

    题目 一颗\(n\)个节点的树,每个点有一个权值\(a_i\) 询问树上连通块权值之和对 \(m\) 取模为$ x $ 的方案数 答案对\(950009857\) 取模,满足\(m | 9500098 ...

  6. 《Machine Learning - 李宏毅》视频笔记(完结)

    https://www.youtube.com/watch?v=CXgbekl66jc&list=PLJV_el3uVTsPy9oCRY30oBPNLCo89yu49 https://www. ...

  7. Python全栈--目录导航

    这里更新以Python语言作为基础,想要成为全栈工程师需要掌握的技能... Python基础语法 day01 初识Python day02 while循环 运算符和编码 day03 字符串 day04 ...

  8. CentOS环境Tomcat配置JDK的另一种方式

    如下图catalina.sh中的描述,JAVA_HOME环境变量可以配置在CATALINA_BASE/bin/目录下的setenv.sh文件中(默认这个文件是不存在的) 创建文件setenv.sh,在 ...

  9. 记录一次在生成数据库服务器上出现The timeout period elapsed prior to completion of the operation or the server is not responding.和Exception has been thrown by the target of an invocation的解决办法

    记一次查询超时的解决方案The timeout period elapsed...... https://www.cnblogs.com/wyt007/p/9274613.html Exception ...

  10. elasticsearch迁移数据到新索引中

    因为业务原因,需要修改索引的映射的某个字段的类型,比如更改Text为Keyword. 需要如下步骤: 1).先新建索引,映射最新的映射实体 2).迁移老索引的数据到新索引中(数据较大的话,可以分批迁移 ...