通过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. 机器学习之Adaboost算法原理

    转自:http://www.cnblogs.com/pinard/p/6133937.html 在集成学习原理小结中,我们讲到了集成学习按照个体学习器之间是否存在依赖关系可以分为两类,第一个是个体学习 ...

  2. DX9纹理半像素偏移-Directly Mapping Texels to Pixels

    原文:DX9纹理半像素偏移-Directly Mapping Texels to Pixels 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u01 ...

  3. SDUT-3379_数据结构实验之查找七：线性之哈希表

    数据结构实验之查找七:线性之哈希表 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 根据给定的一系列整数关键字和素数p, ...

  4. LintCode刷题笔记-- Update Bits

    标签: 位运算 描述: Given two 32-bit numbers, N and M, and two bit positions, i and j. Write a method to set ...

  5. 对快速排序的分析 Quick Sort

    快速排序 快排的基本思想是:通过一趟排序将待排记录分割成独立的两部分,其中一部分记录的关键字均比另一部分记录的关键字小,则可分别对这两部分记录继续进行排序,以达到整个序列有序.通常可选第一个记录为基准 ...

  6. 使用php封装APP接口

    php封装APP接口 我们先来介绍Json的封装方法 json_encode函数传递中文的话,输出后是乱码的,针对这个问题我觉得有必要做一个解释: 其实json_encode对中文那不是乱码,只是js ...

  7. Oracle存储过程小解

    Oracle存储过程小解 1.创建语法 create or replace procedure pro_name( paramIn in type, paramOUt out type, paramI ...

  8. Directx11教程(52) 实例(instancing)的简单应用

    原文:Directx11教程(52) 实例(instancing)的简单应用 有些时候,我们需要在场景中渲染大量的重复的物体,比如体育场中的观众,森林里面的树木等等,这些物体具有相似的形状,比如很多树 ...

  9. oracle如何利用hostname方式连接数据库

    host name方式只支持tcp/ip协议的小局域网 修改listener.ora中的如下信息 (SID_DESC = (GLOBAL_DBNAME = ur_hostname) --你的机器名 ( ...

  10. WinMail邮件服务器（客户端）环境搭建与配置

    WinMail邮件服务器(客户端)环境搭建与配置      一.在搭建WinMail邮件服务器(客户端)之前必备            (1).在虚拟机上安装两个干净无毒的操作系统          ...