这个是一个同事写的,我看着有用,就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. Django之查询总结

    models.Book.objects.filter(**kwargs): querySet [obj1,obj2]models.Book.objects.filter(**kwargs).value ...

  2. 在linux下打开文件出现^M，^H

    0 Problem 在服务器上跑keras实验,然后用tee指令把实验结果保存在文本文件中. 文本文件在本机linux下用vim打开文件时会出现^M,^H.用sublime打开也会出现奇怪的字符. 1 ...

  3. nginx3

    Yum安装更简单.安装并启动keepalived,表示安装成功.有3个进程. etc\keepalived\keepalived.conf: 备的keepalived配置文件: ! Configura ...

  4. hadoop29---自定义注解

    自定义注解: package cn.itcast_04_springannotation.userdefinedannotation.annotation; import java.lang.anno ...

  5. kill、PKill、xkill 和killall----杀死进程

    终止一个进程或终止一个正在运行的程序,一般是通过kill .killall.pkill.xkill 等进行.比如一个程序已经死掉,但又不能退出,这时就应该考虑应用这些工具.另外应用的场合就是在服务器管 ...

  6. MySQL引擎及选择

    一.MySQL的存储引擎 完整的引擎说明还是看官方文档:http://dev.mysql.com/doc/refman/5.6/en/storage-engines.html 这里介绍一些主要的引擎 ...

  7. vue路由两种传参的区别

    //定义路由 { path:"/detail", name:"detail", component:home } //这种做法是错误的,这是query传参的方式 ...

  8. apache性能测试工具ab

    性能测试工具目前最常见的有以下几种:ab.http_load.webbench.siege ab是apache自带的压力测试工具.ab非常实用,它不仅可以对apache服务器进行网站访问压力测试,也可 ...

  9. hbase 异常

    1.org.apache.hadoop.hbase.ipc.CallTimeoutException a.出现情况描述:使用java API进行hbase数据的scan操作,发现有的数据可以scan到 ...

  10. hydra简单使用示例

    本内容为网上收集整理,仅作为备忘!! hydra简单使用示例: 破解https: # hydra -m /index.php -l muts -P pass.txt 10.36.16.18 https ...