通过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. 使用fast-json-stringify代替JSON.stringify

    使用JSON.stringify的思考 使用过JSON对象的程序员最常做的一项工作便是,将JSON对象转化为字符串.该字符串的用途很多,例如可以使用在WEB的URL中,在多个页面间进行传递. cons ...

  2. PHP协程：并发 shell_exec

    在PHP程序中经常需要用shell_exec执行一些命令,而普通的shell_exec是阻塞的,如果命令执行时间过长,那可能会导致进程完全卡住.在Swoole4协程环境下可以用Co::exec并发地执 ...

  3. Webpack ERROR in Path must be a string. Received undefined

    在学习webpack过程中,我遇到的下面这个问题及解决方法. 问题如下: node版本如下截图: package.json文件截图: webpack.config.js文件截图: 然后,我运行项目,报 ...

  4. 50倍时空算力提升，阿里云RDS PostgreSQL GPU版本上线

    2019年3月19日,阿里云RDS PostgreSQL数据库GPU规格版本正式上线,开启了RDS异构计算并行加速之路.该版本在RDS(关系型数据库服务)的云基础设施层面首次完成了与阿里云异构计算产品 ...

  5. less知识点总结(二)

    变量:以@开头,由于变量只能定义一次,其本质就是“常量”. @nice-blue: #5B83AD; @light-blue: @nice-blue + #; #header { color: @li ...

  6. 排序函数中比较函数cmp的理解

    无论是使用 sort() 或者 qsort(), 都会使用到自己定义比较函数, 习惯上定义为 cmp 如: int cmp(const void *x, const void *y) { return ...

  7. Android Bitmap缓存介绍

    转载自http://blog.csdn.net/linghu_java/article/details/8595717 Android中加载一个Bitmap(位图)到你的UI界面是非常简单的,但是如果 ...

  8. day39-Spring 15-Spring的JDBC模板：C3P0连接池配置

    <!-- 配置C3P0连接池 --> <bean id="dataSource2" class="com.mchange.v2.c3p0.ComboPo ...

  9. 【Leetcode链表】分隔链表（86）

    题目 给定一个链表和一个特定值 x,对链表进行分隔,使得所有小于 x 的节点都在大于或等于 x 的节点之前. 你应当保留两个分区中每个节点的初始相对位置. 示例: 输入: head = 1->4 ...

  10. python 异常处理技巧