JavaScript实现网页下拉列表的省市联动

大家好，今天我和大家分享网页中下拉列表的省市联动。在我们平常填写一些信息时就会有省市联动，就是在第一个下拉列表中选择我们所在的省，后面一个下拉列表显示该省的所有城市。

既然是省市联动，我们就不能把数据直接写到网页上，我们应该通过第一个下拉列表的省动态生成该省的所有城市。我们可以先定义一个JSON对象表示省，在对象中定义一个数组存储一个省中的所有城市（这里的城市也是JSON对象），最后用数组存储所有的省。我们可以利用JavaScript在网页上面添加选项option。联动这块我们可以为第一个下拉列表添加一个change事件，当它改变时后一个下拉列表的就更新为当前省的所有城市。

首先我们需要省市的数据:就是一个包含所有省的数组，而且每个省中有一个城市数组。这里我是写北京为例子。

var data = [
{
        "province": "北京",
        "city": [
            {
                "cname": "北京",
                "code": "101010100"
            },
            {
                "cname": "朝阳",
                "code": "101010300"
            },
            {
                "cname": "顺义",
                "code": "101010400"
            },
            {
                "cname": "怀柔",
                "code": "101010500"
            },
            {
                "cname": "通州",
                "code": "101010600"
            },
            ...
        ]
    },
    ....]

然后我们先在页面上显示两个下拉列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>所在地区</title>
</head>
<body>
<select id="province"></select>省
<select id="city"></select>市
<script src="js/data.js"></script>
<script src="js/mycity.js"></script>
</body>
</html>

对应的JavaScript的代码：先对数组进行遍历得到的是所有的省，再对每个省遍历就能改省的所有城市。通过创建和添加option节点在页面上显示。

// 对数据进行遍历显示所有省
data.forEach((p, i) => {
    //创建一个option节点
    let option = document.createElement('option');
    //设置option节点文本值
    option.textContent = p.province;
    //设置option节点的value值
    option.value = i;
    //向id为province的元素中追加了一个子节点option
    $('province').appendChild(option);
    //默认在下拉列表加载城市
    chooseCity(0);
})
//为向id为province的元素添加‘change'事件
$('province').addEventListener('change', function () {

/* 在下拉列表中加载城市*/
    chooseCity(this.value);
})
//函数：获取对应省的所有城市
function chooseCity(index) {
    //通过索引获取对应的省
    let p = data[index];
    //清除当前的城市信息
    $('city').length = 0;
    //获取对应省的所有城市
    let cities = p.city;
    //对所有城市进行遍历显示
    cities.forEach(c => {
        //创建一个option1节点
        let option1 = document.createElement('option');
        //设置option1节点文本值
        option1.textContent = c.cname;
        //向id为city的元素中追加了一个子节点option1
        $('city').appendChild(option1);
    })
}
//函数：通过id获取元素
function $(id) {
    return document.getElementById(id);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js省市联动效果完整实例代码

    js省市联动效果完整实例代码

    本文实例讲述了js省市联动效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title></title> <script language="javascript" type="text/javascript"> //定义 城市 数据数组 cityArray = new Array(); cityArray[0] = new Array("北

  • jquery+json 通用三级联动下拉列表

    Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-03-10 02:03 Blog: http://shaoyun.cnblogs.com/ 用Jquery实现,原始代码只支持IE,这里我改了一下,我的代码里面有三个版本的实现 第一个是通过读取XML构建,支持IE/firefox,chrome不支持,有兴趣的可以将读取XML的部分改成AJAX的方式,这样chrome支持就不成问题 第二个是采用Json数据格式构建,是我的第二次尝试改进

  • jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

    对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接     par:ID       sel:下拉列表选择器 //获取下拉列表 function BuildSelectBox(url, par, sel) { $(sel).empty(); $.getJSON(url, { id: par }, function (json, textStatus) { for (var i = json.length - 1; i >= 0; i--

  • JavaScript二维数组实现的省市联动菜单

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> //初始化一个二维数组存储城市列表项 var cities=[ ["安庆","合肥",&

  • javascript 09年最新版的省市联动

    请选择 请选择 请选择 var areaData = "110000|北京市,110100|市辖区,110101|东城区,110102|西城区,110103|崇文区,110104|宣武区,110105|朝阳区,110106|丰台区,110107|石景山区,110108|海淀区,110109|门头沟区,110111|房山区,110112|通州区,110113|顺义区,110114|昌平区,110115|大兴区,110116|怀柔区,110117|平谷区,110200|县,110228|密云县,11

  • 基于JS实现省市联动效果代码分享

    基于JS实现省市联动效果代码分享

    在日常项目开发阶段经常见到下拉框二级联动效果,尤其是涉及地区.品种等有多级选项时.比如说:常见的省市联动下拉框,在选择省份时,城市列表也会更随改变. 思路: 1,所谓联动效果,是指出发父级的数据变化时,会影响到关联性子级数据元素的变化. 下面是造的省市的数据: var linkDatas = { provinces:[ { "code":"0", "name":"请选择" }, { "code":"

  • JavaScript省市联动实现代码

    复制代码 代码如下: <html><head>    <title>JS省市二级联动菜单,整理收集.</title></head><body bgcolor="#FFFFFF" alink="#333333" vlink="#333333" link="#333333" topmargin="0"    leftmargin="0&

  • 解决JavaScript实现省市联动过程中的bug

    先把实现省市联动遇到的问题描述一下 1.1.原来的思路 1.1.1.初始化加载省份 $.ajax({ 'type' : 'POST', 'dataType' : 'json', 'url' : '${rc.contextPath}/crm/merchantMgr/editMerchantBankAccount.htm?method=getBankProvinces', 'success' : function(msg) { bankProvinces = msg; for(var i=0;i<b

  • 基于JavaScript实现省市联动效果

    基于JavaScript实现省市联动效果

    本文实例为大家分享了JavaScript实现省市联动效果的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>省市级联动效果</title> </head> <body onload="initProvince()"> 省

  • JSON+HTML实现国家省市联动选择效果

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>json</title> <script type="text/javascript"> <!-- v

  • JavaScript实现省市联动效果

    JavaScript实现省市联动效果

    本文实例为大家分享了JavaScript实现省市联动的具体代码,供大家参考,具体内容如下 实现效果: 1.当点击文字时选中对应的下拉菜单 2.选择省,后面跟本省对应的市 实现过程: 1.获得省的Dom对象 2.用循环为省的下拉菜单设置option子节点,并将数组每个pName的值赋给创建的子节点 3.每次循环同时为option子节点设置value属性 4.同理在点击省的同时,为市创建option子节点,并将cName的值赋给子节点,设置属性 实现细节: 1. 点击省时采用onchange事件(元

  • js实现下拉列表选中某个值的方法(3种方法)

    本文实例讲述了js实现下拉列表选中某个值的方法.分享给大家供大家参考,具体如下: 方法1: <select id="aa"> <option>1</option> <option>2</option> </select> <input type="button" value=" 选中" onclick="checkOption()" /> &l

  • js实现省市联动效果的简单实例

    实例如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>省市二

随机推荐