<!DOCTYPE>

<html>

<head>

    <title>级联下拉列表</title>

    <meta charset="UTF-8">

</head>

<body onload="load()">

    <div>

        <select class='prov' id='prov' onchange='changeCity()'>

            <option value=''>--请选择省--</option>

        </select>

        <select class='city' id='city'>

            <option value=''>--请选择市--</option>

        </select>

    </div>

    <script>

        var province=document.getElementById("prov");

        var city=document.getElementById("city");

        var arr_prov=new Array(new Option("--请选择省--",''),new Option("湖南","hn"),new Option("广东","gd"));

        var arr_city=new Array();

        arr_city[0]=new Array(new Option("--请选择市--",''));

        arr_city[1]=new Array(new Option("长沙",'cs'),new Option("娄底",'ld'),new Option("永州",'yz'));

        arr_city[2]=new Array(new Option("广州",'gz'),new Option("深圳",'sz'));

        //动态载入所有省份

        function load(){

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

                province.options[i]=arr_prov[i];

            }

        }

        //选中省份之后，根据索引动态载入相应城市

        function changeCity(){

            //清空上次的选项

            city.options.length=0;

            //获取省一级的下拉列表选中的索引

            var index=province.selectedIndex;

            for(var i=0;i<arr_city[index].length;i++){

                city.options[i]=arr_city[index][i];

            }

        }

    </script>

</body>

</html>
要点：
1.省份信息可以在页面加载时就导入
2.城市信息随着省份选择的改变而改变，故应放在省份的onchange函数内
3.本例核心：selectedIndex属性，下拉列表所选中项的索引
4.一个bug处理：若不加上“city.options.length=0”，则在city列表中，上一省份对应城市的结果会影响下一省份的城市列表（不妨试一试）；故要用这条代码清空列表，消除影响。

原生js实现级联下拉列表的更多相关文章

  1. 原生JS实现下拉列表

    1 <div class="list"> 2 <ul> 3 <li> 4 <a href="#">Web部< ...

  2. 转：『代码』JS封装 Ajax级联下拉列表

    在博客园看到一篇不错的AJAX级联下拉列表,觉得不错,特地拿下来 :转载来自:『大雪无痕』 ,原文地址 //当一个 下拉列表 改变时,触发所有联动:(警告:各下拉列表之间 请不要出现 循环依赖) // ...

  3. JS动态级联菜单

    JS动态级联菜单是前端常用的一个功能,特此抽时间研究了下,附上代码 <html> <head> <meta charset="utf-8" /> ...

  4. 原生js二级联动

    今天说的这个是原生js的二级联动,在空白页面里动态添加并作出相对应的效果. 1 //创建两个下拉列表 select标签 是下拉列表 var sel = document.createElement(& ...

  5. js动态生成下拉列表

    经常需要用到js动态生成下拉列表的功能,记录下来备用. 示例需求:通过ajax请求,从后台获取用户姓名列表,并添加到下拉列表中.js代码如下: function getNameList(){ //如果 ...

  6. 通过案例来剖析JQuery与原生JS

    首先来个例子: 我们在登陆或者注册一些网站时,如果某一项点过了但没填,鼠标移走后是不是经常看到网站有相应的红色字体提示呢? 那下面我们就以这个为例来剖析下jQuery和原生JS的一些区别,来上代码: ...

  7. 使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理

    最近在改造原有Bootstrap开发框架,增加一个Vue&Element前端的时候,发现需要处理一个级联更新的过程,就是选择公司,然后更新部门,选择部门,或者人员列表,选择作为主管的一个实现, ...

  8. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  9. 常用原生JS方法总结（兼容性写法）

    经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...

随机推荐

  1. Python_每日习题_0001_数字组合

    # Topic: There are four digits: 1, 2, 3 and 4. # How many different three digits can be formed witho ...

  2. Redis学习笔记之多机数据库

    1.复制 完整重同步,从服务器完全复制主服务器的数据,主要通过RDB文件和单条命令传输(套接字连接). 部分重同步,主服务器进行命令传播的时候,不仅会把写命令发送给从服务器,而且还会把写命令放入复制积 ...

  3. [BUAA软工]第一次结对作业

    [BUAA软工]结对作业 本次作业所属课程: 2019BUAA软件工程 本次作业要求: 结对项目 我在本课程的目标: 熟悉结对合作,为团队合作打下基础 本次作业的帮助:理解一个c++ 项目的开发历程 ...

  4. JAVA面对对象(三)——Super、static、final关键字

    Super 使用super关键字可以直接调用父类中的构造方法.属性.普通方法 super调用父类构造方法的操作,与this调用构造方法一样,语句必须放在子类构造方法的首行 public class P ...

  5. 去掉ambiguous expansion of macro警告

    查看原文:http://www.heyuan110.com/?p=1221 用pod install后,pod工程里出现ambiguous expansion of macro的warning,对于有 ...

  6. DOM的基本操作

    什么是DOM 1:文档对象模型(DocumentObjectModel,DOM) 2:DOM定义了访问和操作HTML文档的标准方法. 3:DOM将HTML 文档表达为树结构. 其他查询元素的方法: d ...

  7. [转帖]IIS内虚拟站点配置信息说明

    web.config配置详细说明 https://www.cnblogs.com/zhangxiaolei521/p/5600607.html 原作者总结的很详细 但是没有完全的看完 自己对IIS 的 ...

  8. CentOS下使用VirtualBox 安装 Windows虚拟机的简单方法

    1.物理服务器安装CentOS7.5 2. 安装VNC 3. 关闭防火墙,关闭selinux,上传virtualbox的rpm包. http://download.virtualbox.org/vir ...

  9. QA

    QA:Quality Assurance,品质保证 IDQA:Individual Document Quality Assurance 设计品质保证 QE:Quantitative Easing 质 ...

  10. ［转］curl的详细使用

    转自:http://www.cnblogs.com/gbyukg/p/3326825.html 下载单个文件,默认将输出打印到标准输出中(STDOUT)中 curl http://www.centos ...