这个是一个同事写的,我看着有用,就cv下来了.

程序功能主要逻辑是:

1.当一级标签市显示默认状态 '-请选择-'时,二级标签要隐藏

2.一级标签选中城市时,二级标签显示在页面,并列出响应市区

3.当一级标签选回默认状态时,二级标签隐藏

<!DOCTYPE HTML>

<html>

<head>

<title>城市二级联动列表</title>

<meta charset="utf-8" />

<style>

    .hide{ display: none; }

</style>

</head>

<body>

    <select name="provs">

        <option>—请选择—</option><!---->

        <option>北京市</option><!---->

        <option>天津市</option>

        <option>河北省</option>

    </select>

    <select name="cities" class="hide">

    </select>

  <script>

    /*实现“省”和“市”的级联下拉列表*/

    var cities=[

      [{"name":'东城区',"value":101},

       {"name":'西城区',"value":102},

       {"name":'海淀区',"value":103},

       {"name":'朝阳区',"value":104}],//0

      [{"name":'河东区',"value":201},

       {"name":'河西区',"value":202},

       {"name":'南开区',"value":303}],

      [{"name":'石家庄市',"value":301},

       {"name":'廊坊市',"value":302},

       {"name":'保定市',"value":303},

       {"name":'唐山市',"value":304},

       {"name":'秦皇岛市',"value":304}]

    ];

    //查找两个select

  var selProvs=

    document.getElementsByName(

      "provs"

    )[0];

  var selCts=

    document.getElementsByName(

      "cities"

    )[0];

  //为selProvs绑定选中项改变事件

  selProvs.onchange=function(){

    //获得当前select选中项的下标

    var i=this.selectedIndex;

    if(i>0){

      //获得cities数组中i-1位置的子数组

      var cts=cities[i-1];

      //清空selCts的内容:

      selCts.innerHTML="";

      //创建文档片段

      var frag=

       document.createDocumentFragment();

      //创建一个option，内容为-请选择-,追加到selCts下

      var opt=

        document.createElement("option");

      opt.innerHTML="-请选择-";

      frag.appendChild(opt);

      //遍历cts中每个城市

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

        //创建一个option，设置其内容为当前城市的name属性，设置其value为当前城市的value属性,追加到selCts中

        var opt=

          document.createElement("option");

        //cts[i]:

        // {"name":'东城区',"value":101}

        opt.innerHTML=cts[i]["name"];

        opt.value=cts[i]["value"];

        frag.appendChild(opt);

      }

      //将frag整体追加到selCts中

      selCts.appendChild(frag);

      //清除selCts的class

      selCts.className="";

    }else

      selCts.className="hide";

  }

</script>

</body>

</html>

js实现城市二级联动列表的更多相关文章

  1. jq简单城市二级联动实现

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Mybatis + js 实现下拉列表二级联动

    Mybatis + js 实现下拉列表二级联动 学习内容: 一.业务需求 二.实现效果 三.代码实现 1. province_city.jsp 2. TwoController 2. Province ...

  3. 【分享】纯js的n级联动列表框 —— 基于jQuery，支持下拉列表框和列表框，最重要的是n级，当然还有更重要的

    多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...

  4. asp.net mvc jQuery 城市二级联动

    页面效果图: 数据库表结构: 首先在数据库中创建省级.城市的表,我的表如下:我用了一张表放下了省级.城市的数据,用level划分省份和城市,parentId表示该城市所在省份的id 主要文件有:ind ...

  5. xml+js+html的二级联动

    首先需要准备的文档是: cities.xml //主要是标注中国各省及其各省下的各个城市 内容如下: <?xml version="1.0" encoding="U ...

  6. Ajax实现的城市二级联动二

    上一篇联动一种只是城市用ajax请求获取并渲染,这里将省份也用ajax请求并渲染 1.HTML <select id="province"> <option> ...

  7. Ajax实现的城市二级联动一

    前一篇是把省份和城市都写在JS里,这里把城市放在PHP里,通过发送Ajax请求城市数据渲染到页面. 1.html <select id="province"> < ...

  8. 纯js的N级联动列表框 —— 基于jQuery

    多个列表框联动,不算是啥大问题,但是却挺麻烦,那么怎么才能够尽量方便一点呢?网上搜了一下,没发现太好用的,于是就自己写了一个.基于jQuery,无限级联动,支持下拉列表框和列表框. 先说一下步骤和使用 ...

  9. js实现菜单二级联动

    代码如下,以便自己以后方便查阅: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> < ...

随机推荐

  1. day6 字典的增减查删

    字典的使用 一.字典的特性 字典是无序的,数据关联性强,键值对,唯一一个映射的数据类型 字典的键必须是可哈希的(不可变的数据类型:字符串,数字,布尔值,元祖),并且是唯一的 不可哈希的(可变的数据类型 ...

  2. (转)HttpWebRequest以UTF-8编码写入内容时发生“Bytes to be written to the stream exceed the Content-Length bytes size specified.”错误

    from:http://www.cnblogs.com/Gildor/archive/2010/12/13/1904060.html HttpWebRequest以UTF-8编码写入内容时发生“Byt ...

  3. 关于线程安全Dictionary

      使用Dictionary时, 是线程不安全的(). 会出现以下的问题, 导致IIS挂掉: 其实DicMapper是不为NUL的, DicMapper["aaasdfasdfasdfzxc ...

  4. Codeforces Round #395 (Div. 2)B. Timofey and cubes

    地址:http://codeforces.com/contest/764/problem/B 题目: B. Timofey and cubes time limit per test 1 second ...

  5. json字符串转化为json对象and 对象转化为 json字符串

    第一种方法: var data =evel('('+jsonstr+')') 解析:  这种方法是常用的方法, 即动态执行 javascript代码 在堆中存放数据. 存在安全问题. 第二种方法:   ...

  6. Oracle11g：分区表数据操作出现ORA-14400异常处理

    Oracle11g:分区表数据操作出现ORA-14400异常处理 问题: 当对已分区的表数据进行操作(例如新增,修改),出现异常提示: ORA: 插入的分区关键字未映射到任何分区 分析: 意思说的是插 ...

  7. 添加一个vue全局守卫,主要用于用户登录时候验证

    //注册一个全局守卫,作用是在路由跳转钱,对路由进行判断,防止未登录用户跳转到其他页面 router.beforeEach((to, from, next) => { let token = l ...

  8. MyBatis正在爬的坑

    换了份工作,开始接触Mybatis,开一篇文章记录一下自己遇到的坑 2018-06-20 今天遇到了一个问题,编好的sql语句在数据库可以执行但是写到程序里边就GG,什么问题呢?一直纠结在程序哪里写错 ...

  9. Android 6.0中在/dev下添加新设备驱动下Selinux相关设置【转】

    本文转载自:https://blog.csdn.net/fantasy_wxe/article/details/52013922 错误1: 07-23 13:06:57.617   117   117 ...

  10. python部署LNMP业务服务环境