<!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. react/React Native 在 import 导入时，有的带花括号{},有的不带原理解析

    在使用import引用模块时,如何正确使用{} 例如:有两个文件,home.js.user.js 一:不使用{}: 当需要在home.js中引入user.js的时候 //home.js 文件中impo ...

  2. tableView优化思路

    一般优化的思路: 提前计算并缓存好高度(布局),因为heightForRowAtIndexPath:是调用最频繁的方法. 复杂界面可采用异步绘制. 在大量图片展示时,可以滑动时按需加载. 尽量少用或不 ...

  3. 对PS的评价

    Photoshop(简称:PS)是电脑上的图像处理软件:对于广大Photoshop爱好者而言,PS亦用来形容通过该类图形处理软件处理过的图片,即非原始.非未处理的图片:多数人对于这软件的了解仅限于“一 ...

  4. 对spring cloud config的一点理解

    以下部分纯属个人理解,但是结果都是经过demo验证. 一.spring cloud config介绍 spring cloud是spring家族中的一个微服务工具包,其中包含了很多微服务的工具.偏向于 ...

  5. Oracle 转移符问题

    注:select '''' from dual;    --输出一个单引号      select '''''' from dual;   --输出两个单引号      select '''''''' ...

  6. HDOJ2010_水仙花数

    一道水题.一直出现Output Limit Exceeded的原因是在while循环中没有终止条件的时候会自动判断并报错,写的时候忘记加!=EOF结束标识了. HDOJ2010_水仙花数 #inclu ...

  7. maven私服 Nexus2.x.x私服安装配置

    一.Nexus的下载和安装 1.下载nexus ,下载地址:https://www.sonatype.com/download-oss-sonatype  2.打开目录nexus-2.x.x-xx-b ...

  8. HDU 2053 Switch Game

    http://acm.hdu.edu.cn/showproblem.php?pid=2053 Problem Description There are many lamps in a line. A ...

  9. Max length of title attribute in html

    测了一下chrome是1024个utf-8字符. 具体可见: http://stackoverflow.com/questions/8516235/max-length-of-title-attrib ...

  10. FuelPHP 系列（五） ------ Security 防御

    项目中难免会有 form 提交,对用户输入的所有信息进行过滤,可以避免 XSS 攻击,防止 SQL 注入. 一.设置配置信息 首先在 config.php 文件中,对 security 相关信息进行设 ...