这个是一个同事写的,我看着有用,就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. Apache和Nigix

    Apache   ,   Nginx    是开源的HTTP服务器软件 HTTP服务器本质上也是一种应用程序--它通常运行在服务器之上,绑定服务器的IP地址并监听某一个tcp端口来接收并处理HTTP请 ...

  2. zend studio设置utf8

    1. windows -> preference -> general -> workspace 2.项目右键 -> properities -> resource 3. ...

  3. linux命令详解之（at）--6/24

    在Linux下,有两个命令可以用来作为计划任务而执行,at:一次性定时任务计划执行crontab :每天定时任务计划执行 以下仅说一下一次性任务计划执行(at)要使用一次性任务计划,linux必须要有 ...

  4. application/x-www-form-urlencoded和multipart/form-data

     我们在提交表单的时候,form表单参数中会有一个enctype的参数. EncType表明提交数据的格式,用 Enctype 属性指定将数据发到服务器时浏览器使用的编码类型. enctype指定了H ...

  5. 20145222黄亚奇《网络对抗》- shellcode注入&Return-to-libc攻击深入

    20145222黄亚奇<网络对抗>- shellcode注入&Return-to-libc攻击深入 shellcode注入实践过程

  6. 开源CMDB详细安装使用

    CMDB的GitHub地址: https://github.com/open-cmdb/cmdb 环境说明 [root@WCY ~]# cat /etc/redhat-release CentOS L ...

  7. 容器编排Kubernetes之kube-dns源码解读

    注:阅读DNS源码前,可以阅读DNS原理入门增加对DNS的认识. 架构图 这是我简单画的架构图,希望能帮助大家理解. 代码结构 k8s.io | dns | cmd // 三大组件的入口 | dnsm ...

  8. python 爬虫004-使用urllib2与正则表达式扒取糗事百科新鲜页首页帖子

    面向过程的方式 #!/usr/bin/env python # -*- coding: utf-8 -*- import urllib2 import sys import re import os ...

  9. ddt读取json文件测试用例的执行顺序

    一. 源码的说明 在源码中,ddt的file_data函数下有这样一段话 意思是说,如果json文件的内容是字典,字典的键名将会作为测试用例名的后缀,字典的值将会作为测试数据,如果这样的话,如果键名字 ...

  10. 牛客练习赛13D

    定义一个数字为幸运数字当且仅当它的所有数位都是4或者7.比如说,47.744.4都是幸运数字而5.17.467都不是.现在想知道在1...n的第k小的排列(permutation,https://en ...