这个是一个同事写的,我看着有用,就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. 自己写的一个简单PHP采集器

    自己写的一个简单PHP采集器 <?php //**************************************************************** $url = &q ...

  2. knit使用安装 ecstore knit位置 及调用路径

    菜鸟一枚,接触php不久. 情况一: 最简单的: windows下, php文件引用kint 将kint放入c盘 php/pear下,我一般将kint包改名字为kint 结构如下: c:/php/pe ...

  3. CentOS7种搭建FTP服务器

    1．安装vsftpd #首先要查看你是否安装vsftp [root@localhost /]# rpm -q vsftpd vsftpd-3.0.2-10.el7.x86_64             ...

  4. phpword使用

    composer 安装 https://packagist.org/packages/phpoffice/phpword 开发文档:http://phpword.readthedocs.io/en/l ...

  5. linux（6/17）--文件打包上传和下载

    tar命令 命令功能 用来压缩和解压文件 命令格式 tar[必要参数][选择参数][文件] tar打包工具 -f ##指定生成包的名字,建议 -f单独写成一个参数 --delete filename ...

  6. Python3.x：获取登录界面校验码图片

    Python3.x:获取登录界面校验码图片 实例代码: # python3 # author lizm # datetime 2018-06-01 18:00:00 # -*- coding: utf ...

  7. tinyxml优化之二

    原文链接:http://www.cnblogs.com/zouzf/p/4216046.html tinyxml优化之一说到了效率在差别有三方面的原因:解析的方式.内存分配(字符串操作).冗余的安全性 ...

  8. xshell 常用命令

    一.grep 命令 (1)命令格式 grep [选项] pattern [file] (2)常用参数 参数 描述 -c 计算找到 '搜寻字符串'(即 pattern) 的次数 -i 忽略大小写的不同, ...

  9. NaviCat Primium远程连接Oracle 11g数据库操作方法

    说明:作者使用的系统是windows 10 64位系统,使用的软件及插件都是基于64位系统进行安装.一. 软件准备 1.windows 10 64位 操作系统 2.NaviCat Primium 11 ...

  10. 《React-Native系列》RN与native交互与数据传递

    RN怎么与native交互的呢? 下面我们通过一个简单的Demo来实现:RN页面调起Native页面,Native页面选择电话本数据,将数据回传给RN展示. 首先是 Native侧 1.MainAct ...