<!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. SQLServer 中发布与订阅

    在对数据库做迁移的时候,会有很多方法,用存储过程,job,也可以用开源工具kettle,那么今天这些天变接触到了一种新的方法,就是SqlServer中自带的发布与订阅. 首先说明一下数据复制的流程.如 ...

  2. Record for Individual Project ( Word frequency program )

    1.  预计时间 ● 对问题总体的理解.规划:10 min ● 设计编写程序:5 h ● 调试: 分模块-40 min; 总体-40min ● 测试(性能分析).改进:1 h 2.  实际用时 ● 对 ...

  3. 5 questions

    1.软件开发中有哪几种过程模型? 2.详细设计有哪几种描述方法? 3.什么是需求分析? 4.软件设计的基本原理包括哪些内容? 5.简述文档在软件工程中的作用? 逸翔.

  4. 【SE】Week17 : 软件工程课程总结

    软工课程总结  总算结束了一个学期大部分的事情,可以静下心来写篇软工的总结了. 在本学期的软工课程中,我担任的角色是Chronos团队的PM兼开发人员.在课程之前,我认为PM的角色应该还蛮轻松的,无非 ...

  5. java 值传递 数组传递

    在java中,不允许程序员选择值传递还是地址传递各个参数,基本类型总是按值传递.对于对象来说,是将对象的引用也就是副本传递给了方法,在方法中只有对对象进行修改才能影响该对象的值,操作对象的引用时是无法 ...

  6. Minimum Integer CodeForces - 1101A （思维+公式）

    You are given qq queries in the following form: Given three integers lili, riri and didi, find minim ...

  7. 简单对比一下不同Windows操作系统在相同硬件配置的情况下浏览器js引擎的性能

    最近部门进行Windows客户端的测试产品单点性能, 感觉不在通的windows版本以及浏览器内核的情况下性能可能有差异, 也一直没有找到一个比较好的对比工具, 今天用chrome的控制台简单测试了下 ...

  8. python自动化运维笔记3 —— dns处理模块dnspython

    1.3 DNS处理模块 dnspython是python实现的一个DNS工具包,它支持几乎所有的记录类型,可以用于查询.传输并动态更新ZONE信息,同时支持TSIG(事物签名)验证消息和EDNS0(扩 ...

  9. 美图美妆由Try Try接手运营

    美图又把一个拖累营收的业务转让出去了. 美图的电商业务——美图美妆应用在向用户发布终止运营的公告后,宣布把业务交给了寺库旗下公司 Try Try 运营.Try Try 接手了美图美妆的所有管理运营权, ...

  10. BZOJ5361[Lydsy1805月赛]对称数——主席树+随机化

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=5361 好神的一道题啊! 容易看出来是要用维护权值的数据结构,因此树链剖分首先pass掉. ...