通过HTML页面的city的select选取的value值，从json里面获取相对应的键值对，最后将值拼接到下拉框中

 function x1(th) {

     //通过传入的th的value获取相对应的citys中的json值

    var cs=citys[th.value];

    var str="";

     //循环获取每一个值并拼接成<option></option>

    for (var i=0;i<cs.length;i++){

      str+="<option>"+cs[i]+"</option>";

    }

     //获取HTML页面的city

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

     //将值写入界面

      city.innerHTML=str;

   }

源码：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<select id="province" onchange="x1(this)">

  <option>请选择</option>

  <option>福建</option>

  <option>江西</option>

</select>

<select id="city" onchange="x2(this)">

  <option>请选择</option>

</select>

<select id="area">

  <option>请选择</option>

</select>

  <script>

    var citys={

      "福建":["请选择","厦门","泉州","漳州"],

      "江西":["请选择","南昌","九江","新余"]

    };

    var areas={

      "厦门":["请选择","思明区","湖里区","同安"],

      "泉州":["请选择","泉州","泉州","泉州","泉州"],

      "南昌":["请选择","南昌","南昌","南昌","南昌"],

      "九江":["请选择","九江","九江","九江","九江"]

    }

  function x1(th) {

   var cs=citys[th.value];

   var str="";

   for (var i=0;i<cs.length;i++){

     str+="<option>"+cs[i]+"</option>";

   }

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

     city.innerHTML=str;

  }

  function x2(th) {

  var aa=areas[th.value];

  var str1="";

    for(var i=0;i<aa.length;i++){

      str1+="<option>"+aa[i]+"</option>";

    }

    var area=document.getElementById("area");

    area.innerHTML=str1;

  }

  </script>

</body>

</html>

js(二) 实现省市联动（json）的更多相关文章

  1. js实现的省市联动

    最近工作,要用到省市联动的功能.网上搜了一下,发现有很多这样的例子,看了不少实例,把觉得写得不错的代码穿上来,好给大家分享一下. <!DOCTYPE html PUBLIC "-//W ...

  2. 练习: 省市联动(Ajax)

    // 示例一: china.xml (位于 src 目录下) <?xml version="1.0" encoding="utf-8"?> < ...

  3. Json 基于jQuery+JSON的省市联动效果

    helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery  JSON  Ajax  省市联动     省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...

  4. Django（二十）下拉列表-省市联动实例：jquery的ajax处理前端

    一.知识点 1.jquery的ajax请求写法 <script src="/static/js/jquery-1.12.4.min.js"></script> ...

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

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

  6. html css javascript 知识点总结 bom js 操作标签 文本 节点 表格各行变色 悬停变色 省市联动 正则

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. [JS]以下是JS省市联动菜单代码

    以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...

  8. 省市联动 纯html+js

    在js里面声明所有数据,并根据html的select事件触发js实现填充对应的数据到下拉框. 代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  9. json的省市联动

    1 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 2 < ...

随机推荐

  1. ORACLE 所有 表 记录 条数

    SELECT TABLE_NAME,TO_NUMBER(EXTRACTVALUE(XMLTYPE(DBMS_XMLGEN.GETXML('SELECT COUNT(*) CNT FROM '||TAB ...

  2. PHPCMS网站迁移过程后，添加内容 报500错误解决方案

    问题出现原因:1.网站迁移过程中,上传下载文件时文件丢失  2.PHPCMS源码更新升级 解决方法 1.可以到官方下载最新版源码,替换过去.如果对源码有改动,需要先保存改动过的文件,替换过去之后,再替 ...

  3. 如何用好消息推送（push）做APP运营

    作为移动端APP产品运营最重要的运营手段,消息推送(push)被越来越多的APP厂商所重视,在信息泛滥的移动互联网时代,手机APP应用安装得越来越多,小小的手机屏幕每天收到的消息推送也越来越多,站在用 ...

  4. @spoj - ADAMOLD@ Ada and Mold

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个长度为 N 的序列 A,将其划分成 K + 1 段,划分 ...

  5. bzoj1221 软件开发

    Description 某软件公司正在规划一项n天的软件开发计划,根据开发计划第i天需要ni个软件开发人员,为了提高软件开发人员的效率,公司给软件人员提供了很多的服务,其中一项服务就是要为每个开发人员 ...

  6. LeetCode21 Merge Two Sorted Lists

    题意: Merge two sorted linked lists and return it as a new list. The new list should be made by splici ...

  7. F4NNIU 整理的 docker-compose 几个常用命令

    F4NNIU 整理的 docker-compose 几个常用命令 up 创建并启动一个容器. 记录一下,如果已经有容器,up 和 start 都可以启动容器,up 可以看到调试窗口,但是 start ...

  8. 2019-8-31-dotnet-控制台-Hangfire-后台定时任务

    title author date CreateTime categories dotnet 控制台 Hangfire 后台定时任务 lindexi 2019-08-31 16:55:58 +0800 ...

  9. Java练习 SDUT-3081_谁是最强女汉子

    谁是最强的女汉子 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 众所周知,一年一度的女汉子大赛又来啦.由于最近女汉子比 ...

  10. AT3728 Squirrel Migration

    AT3728 Squirrel Migration 就是给每个点分配两个匹配点(自环除外) 考虑最大值 考虑极限情况:每个边的贡献是min(sz[u],sz[v])*2 证明存在方案: 发现,如果哪边 ...