通过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. JS黑科技

    1.论如何优雅的取随机字符串 Math.random().toString(16).substring(2) // 13位 Math.random().toString(36).substring(2 ...

  2. laravel微信自定义分享

    https://blog.csdn.net/weixin_41530218/article/details/80777036 今天接触到了微信分享,来记录一下自己所理解的一些逻辑,首先,我画了一个草图 ...

  3. Leetcode788.Rotated Digits旋转数字

    我们称一个数 X 为好数, 如果它的每位数字逐个地被旋转 180 度后,我们仍可以得到一个有效的,且和 X 不同的数.要求每位数字都要被旋转. 如果一个数的每位数字被旋转以后仍然还是一个数字, 则这个 ...

  4. javaScript之split与join的区别

    共同点: split与join函数通常都是对字符或字符串的操作: 两者的区别: split() 用于分割字符串,返回一个数组,例如 var str="How are you doing to ...

  5. 正则表达式问题：如何理解/href\s*=\s*(?:"(?<1>[^"]*)"|(?<1>\S+))/(转载)

    ms-help://MS.VSCC/MS.MSDNVS.2052/jscript7/html/jsjsgrpregexpsyntax.htm 该文虽有解释, 但没有样例,对我这样的初学者来说很难理解 ...

  6. shell学习（18）- split切分文件命令

    Linux split命令用于将一个文件分割成数个. 该指令将大文件分割成较小的文件,在默认情况下将按照每1000行切割成一个小文件. 语法: split [--help][--version][-& ...

  7. 2016年中国的SaaS服务商企业研究

    近年来,随着中国人口红利的消退及移动互联网红利的凸显,让中国的To C创业,尤其是O2O领域的创业经历了一波高潮.2015年末,一场"资本寒冬"让O2O创业趋于理性,但SaaS及T ...

  8. day10-02_多线程之进程与线程的pid

    一.多个线程之间PID的区别 主进程跟线程的pid是一样的 from threading import Thread from multiprocessing import Process impor ...

  9. oralce CUBE

    select id,area,stu_type,sum(score) score from students group by cube(id,area,stu_type) order by id,a ...

  10. HDFS概念名称节点和数据节点-名称节点