基于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>

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

赞 (0)

相关推荐

  • 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 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":"

  • 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>省市二

  • JavaScript省市联动实现代码

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

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

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

  • JavaScript实现省市联动效果

    JavaScript实现省市联动效果

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

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

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

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

  • 解决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()"> 省

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

    基于jquery实现省市联动效果

    由于项目需要需要实现一个省市联动,由于业务有一些特殊的需求,使用现有的插件略有不便,就自己实现了一个. 首先需要保存地区数据的JS数据文件,我这里命名为areaData.js,内容如下: /** * 保存地区信息 * 数据格式 * areaData = [{'pro': '北京', 'cities': {'-1': '北京'}}, {...}] * 直辖市存在-1,表示就是直辖市 */ (function(window) { window.areaData = [{"pro":&quo

  • 省市联动效果的简单实现代码(推荐)

    省市联动效果的简单实现代码(推荐)

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

  • 基于jquery实现省市联动特效

    基于jquery实现省市联动特效

    本文实例讲述了基于jquery实现省市联动特效的代码,分享给大家供大家参考,具体如下: 运行效果图: 具体代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <!-- 引入jquery --> <script src="http://lib.si

  • 基于javascript实现窗口抖动效果

    基于javascript实现窗口抖动效果

    本文实例讲解了基于javascript实现窗口抖动效果的详细代码,分享给大家供大家参考,具体内容如下 效果图: 鼠标点击,窗口实现抖动. 具体代码: <!DOCTYPE HTML> <html> <head> <meta charset="gb2312"/> <title>窗口登陆效果</title> <style type="text/css"> #win { position:r

  • 基于JavaScript实现图片剪切效果

    基于JavaScript实现图片剪切效果

    学会如何获取鼠标的坐标位置以及监听鼠标的按下.拖动.松开等动作事件,从而实现拖动鼠标来改变图片大小. 还可以学习css中的clip属性. 一.CSS实现图片不透明及裁剪效果. 图片剪切三层结构 1.第一层opacity,给图层设置透明度 2.第二层clip,clip属性:对图片进行裁剪,实现图像的一部分显示,其他部分进行隐藏 3.第三层选取框absolute(与第二层重叠的),包括八个触点的效果 html代码: <div id="box"> <img src=&quo

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

    本文为大家分享了JavaScript实现省市联动过程中bug的解决方法,供大家参考,具体内容如下 先把实现省市联动遇到的问题描述一下 1.1.原来的思路 1.1.1.初始化加载省份 $.ajax({ 'type' : 'POST', 'dataType' : 'json', 'url' : '${rc.contextPath}/crm/merchantMgr/editMerchantBankAccount.htm?method=getBankProvinces', 'success' : fun

随机推荐