<!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. 浅谈meta viewport设置移动端自适应

    1.viewport 移动设备上的viewport是设备屏幕上用来显示网页的那部分区域,再具体一点就是浏览器上用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器 ...

  2. mysql 编码和汉字存储占用字节问题的探索

    MySql 5.5 之前,UTF8 编码只支持1-3个字节,只支持BMP这部分的unicode编码区,BMP是从哪到哪?基本就是 0000 ~ FFFF 这一区. 从MySQL 5.5 开始,可支持4 ...

  3. TCP报文格式详解

    TCP报文是TCP层传输的数据单元,也叫报文段. 1.端口号:用来标识同一台计算机的不同的应用进程. 1)源端口:源端口和IP地址的作用是标识报文的返回地址. 2)目的端口:端口指明接收方计算机上的应 ...

  4. java.lang.Exception: No tests found matching Method tes(com.bw.test.Testrefiect) from org.junit.vintage.engine.descriptor.RunnerRequest@3bfdc050 at org.junit.internal.requests.FilterRequest.getRunner

    junit   方法  没有加上注解  @Test java.lang.Exception: No tests found matching Method tes(com.bw.test.Testre ...

  5. PHP使用cookie时遇到的坑

    先看这么一段代码 第一次运行该程序的结果如下图: 然后我刷新了一次,运行结果如下图 你如果不细心,一定没发现,第二次运行的last time的值,正是第一次运行时保存的值. 先看代码,如果$_COOK ...

  6. C++ cout执行顺序

    C++ cout执行顺序 问题描述是这样的:如果在cout中调用函数,同时这个函数中包含输出语句,那么会先输出哪一句? 仔细一看,突然发现对C++的内容遗忘了,确实一下子看不出来输出的先后问题. 实现 ...

  7. [转帖]VBS 教程

    VBS教程 http://www.cnblogs.com/veggiegfei/p/5943260.html 原作者真牛B 网上找了好多 没找到 没想到整理的这么好, 转来学习一下 改天打印出来. V ...

  8. 【转帖】ARM的两种不同的CPU docker 应该也是支持arm的

    armel和armhf区别选择 知识经验  3年前 (2014-11-07)  20603浏览  1评论 目录 fpu单元 armel与armhf 安装armel和armhf arm-linux-gn ...

  9. 将ubuntu14.04 从mysql从5.5删除之后安装5.7遇到的一些问题(本篇不讨论热升级)

    五一放假实在无聊 继续玩弄新的服务器.发现有台mysql版本实在有点老,估计是akiho直接使用 apt-get install mysql-server ,然后又没有更新到最新的源,然后无脑安装了5 ...

  10. 关于pycharm的debugger配置问题(包含启用py.test测试)

    今天才发现了一个刷新三观的问题.那就是 pycharm的底层集成的debugger功能其实是依赖于几个测试框架.. 现在由于要写基于pytest的测试,但是如果到zsh里面去跑命令,明显是效率很低下的 ...