这个是一个同事写的,我看着有用,就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. OpenFileDialog.Filter 属性

    如果 Filter 属性为 Empty,将显示所有文件. 始终显示文件夹. Filter 由以下部分组成:筛选器说明,后跟竖线 (|) 和筛选模式. 筛选器可以指定一个或多个文件类型. 说明描述了对话 ...

  2. Wannafly交流赛1 _A_有理数 【水】

    Wannafly交流赛1 A有理数 [水] 链接:https://www.nowcoder.com/acm/contest/69/A 来源:牛客网 题目描述 有一个问题如下: 给你一个有理数v,请找到 ...

  3. HDU - 6435 Problem J. CSGO 2018 Multi-University Training Contest 10 (二进制枚举+思维)

    题意:有N个主武器(MW)和M个副武器(SW),每个武器都有自己的S值,和K个附加属性xi.要选取一对主副武器搭配,搭配后获得的性能由该公式得出: 求获得最大的性能为多少. 分析:由于|xm - xs ...

  4. HDU - 6437 Problem L.Videos 2018 Multi-University Training Contest 10 (最小费用最大流)

    题意:M个影片,其属性有开始时间S,结束时间T,类型op和权值val.有K个人,每个人可以看若干个时间不相交的影片,其获得的收益是这个影片的权值val,但如果观看的影片相邻为相同的属性,那么收益要减少 ...

  5. Spark机器学习6·聚类模型(spark-shell)

    K-均值(K-mean)聚类 目的:最小化所有类簇中的方差之和 类簇内方差和(WCSS,within cluster sum of squared errors) fuzzy K-means 层次聚类 ...

  6. Forward Proxy vs Reverse Proxy

    Overview We've talked about reverse proxy servers and how they can really be good at protecting the ...

  7. Mybatis中的ParameterType

    mybatis可以传入的参数类型1.基本数据类型       可以通过#{参数名}直接获取.每次只能传入一个值       <select id="selectTeacher" ...

  8. HTML5 SVG世界地图

    在线演示 本地下载

  9. Spring_通过注解配置 Bean(2)

  10. [CF489D]Unbearable Controversy of Being

    题目大意:求有向图中这种图的数量 从分层图来考虑,这是一个层数为3的图 枚举第一个点能到达的所有点,对他们进行BFS求第三层的点(假装它是BFS其实直接枚举效果一样) 代码: #include< ...