因工作需要，做了一个下拉单的二级联动。
第一级是固定的选项，有A、B两个选项，第二级的选项随着第一级选项的变化而变化。
一开始是这样的：
HTML代码
<html>

<head>

    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />

    <title>二级联动</title>

</head>

<body>

    <form name="form1" method="post" action="">

        <select id="project" onchange="changeSelect()" style="width:100px; margin-left:15px;">

            <option value="0">请选择项目</option>

            <option value="1">A</option>

            <option value="2">B</option>

        </select>

        <select id="area" style="width:100px; margin-left:15px;">

            <option value="">请选择区域</option>

        </select>

    </form>

</body>

</html>
JS代码
<script type="text/javascript">

    var area = [

        ['x', 'y', 'z'],   // 对应A

        ['m', 'n'],        // 对应B

    ];

    function changeSelect() {

        //获得项目下拉框的对象

        var slt_project = document.form1.project;

        //获得升级区域下拉框的对象

        var slt_area = document.form1.area;

        //得到项目对应的升级区域数组

        var project_area = area[slt_project.selectedIndex - 1];

        //清空升级区域下拉框，仅留提示选项

        slt_area.length = 1;

        //将升级区域数组中的值填充到升级区域下拉框中

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

            slt_area[i+1] = new Option(project_area[i],project_area[i]);

        }

    }

</script>
但后来提出需求，第一级选B时，第二级无下拉单，直接显示“无”即可。
我把JS代码中area数组改为：
var area = [

    ['x', 'y', 'z'],   // 对应A

    ['无'],            // 对应B

];

改完后第二级下拉单并没有默认显示“无”，依然需要手动选择。

于是，我把JS代码中area数组里对应B的数组注释掉，将HTML代码中第二级下拉单的option由“请选择项目”改为“无”：
HTML代码
<select id="area" style="width:100px; margin-left:15px;">

    <option value="0”>无</option>

</select>

JS代码

var area = [

    ['x', 'y', 'z'],   // 对应A

//    ['无']

];

选B时倒是直接默认显示“无”了，可选A以及“请选择项目”时，第二级也默认显示的是“无”了，还是不符合要求啊。

我就想，用给option赋值的方法，点击B时，将第二级默认option的“请选择区域”替换为“无”，代码如下：

HTML代码

// 给第二级下拉单的option添加id

<select id="area" style="width:100px; margin-left:15px;">

    <option id="option1" value="0">请选择区域</option>

</select>

JS代码

<script src="jquery-2.1.4/jquery.min.js"></script>

<script type="text/javascript">

    $(function () {

        $("#project").click(function () {

            var project = $("#project option:selected").val();

            var str1 = '<option value="0">请选择区域</option>';

            var str2 = '<option value="0">无</option>';

            if (project == "2") {    // 选B时，替换为str2

                $("#option1").html(str2);

            } else {    // 如果没有else代码段，选A时，默认显示的仍然是“无”

                $("#option1").html(str1);

            }

        });

    })

</script>
改完以后，在Firefox上顺利实现此功能，可是在Chrome上，在第一级下单栏中相应选项上点击两下，第二级下拉单栏才能替换为相应的文字。
Google了很多资料，都没解决这个问题，作为前端小白一枚，我放弃了这段实现下拉单二级联动的代码方案，捂脸~
 
后来换了一套JS实现方案，HTML代码不变。因为是联动的，变动一级选择项时，要先清空先前一级选择项对应的所有二级选择项，然后再创建新的一级选择项所对应的二级选择项。
JS代码
<script type="text/javascript">

    function changeSelect() {

        // 父选择项

        var parent = document.getElementById("project");

        var p_value = parent.value;

        // 子选择项的长度，长度大于0，即将所有选择项清空

        var child = document.getElementById("area");

        var c_length = child.options.length;

        if (c_length > 0) {

            for (var i = 0; i < c_length; i++) {

                child.options.remove(0);

            }

        }

        // 重创建子选择项

        var area = [

            ['请选择区域', 'x', 'y', 'z'],   // 对应A

            ['无'],                         // 对应B

            ['请选择区域'],                  // 对应'请选择区域'

        ];

        if(p_value == "1") {

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

                addOption(area[0][i]);

            }

        } else if (p_value == "2") {

            addOption(area[1]);

        } else {

            addOption(area[2]);

        }

    }

    function addOption(txt) {

        var opt = document.createElement("option"); // 创建一个对象

        opt.text = txt;

        opt.value = txt;

        area.options.add(opt);

    }

</script>
在Firefox和Chrome上测试，均没问题，大功告成~
仍需改进：第一级下拉单因为选项比较少，是写死的，也可以写成数组，然后通过遍历数组，将数组中的数据写入option中。

JS实现下拉单的二级联动的更多相关文章

  1. Dwz下拉菜单的二级联动

    在DWZ文档中对组合框combox的是这样描述的: 在传统的select 用class 定义:class=”combox”, html 扩展:保留原有属性name,  增加了属性:ref. ref 属 ...

  2. [Ext JS 4] 实战之多选下拉单 (带checkbox)

    前言 Ext js 创建一个多选下拉单的方式很简单, 使用Ext.form.ComboBox, 设置 multiSelect 为true 就可以了. 但是如果要在每个下拉之前加上一个checkbox, ...

  3. 纯css和js版下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Js获取下拉框选定项的值和文本

    Js获取下拉框的值和文本网上提供了2种方法:但有些人很不负责任,他们根本没考虑到浏览器之间的差异导致的错误,导致很多新手琢磨了半天找不出错误! 下面我总结下Firefox和IE下获取下拉框选定项的值和 ...

  5. vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  6. JS模拟下拉框select

    最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...

  7. js获取下拉，单选

    1.JS取下拉框的显示值和判断单选按钮 1.需要得到select组件显示的值.下面是经常用到的方法: Html 源码: <html><body><select id=&q ...

  8. js改变下拉框内容

      js改变下拉框内容 CreateTime--2018年4月8日18:47:38 Author:Marydon 适用场景:通常情况下,级联菜单.通过ajax异步获取后台数据改写下拉框内容会有这种需求 ...

  9. js版本下拉菜单

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. HDU 4403 A very hard Aoshu problem（dfs爆搜）

    http://acm.hdu.edu.cn/showproblem.php?pid=4403 题意: 给出一串数字,在里面添加一个等号和多个+号,使得等式成立,问有多少种不同的式子. 思路: 数据量比 ...

  2. 【Django】【二】模板

    1. Django-bootstrap3 guest>python -m pip install django-bootstrap3 [代码] settings.py ""& ...

  3. spring boot Tomcat访问日志

    1.Tomcat设置访问日志 <Host name="localhost" appBase="webapps" unpackWARs="true ...

  4. SHA-256 加密原理

    网络中传输敏感信息的时候通常会对字符串做加密解密处理 SHA-256 加密原理

  5. JVM（一）

    1 Java类加载器包括几种?它们之间的关系是怎么样的?双亲委派机制是什么意思?有什么好处? 启动Bootstrap类加载.扩展Extension类加载.系统System类加载. 类加载器也是Java ...

  6. loglog()函数

    数据: xd = [1, 2, 3] yd = [0.6, 0.2, 0.2] matlab中双对数函数: 命令: loglog(xd, yd, 'blacko-', 'MarkerFaceColor ...

  7. Qt532.线程（_beginthread）

    1.(20180928)环境:Win7x64.Qt5.3.2 MSVC2010 OpenGL.ms2010 2.测试代码: ZC:我记得 之前在 VC6.vs08 上,还要选择 使用的是哪种 运行时线 ...

  8. webpack 使用

    背景: 简而言之,如果你曾经遇到过以下任何一种情况:载入有问题的依赖项遇到作用域的问题 —— CSS 和 JavaScript 都会有寻找一个让你在 JavaScript 中使用 Node/Bower ...

  9. Lua和C++交互 学习记录之九：在Lua中以面向对象的方式使用C++注册的类

    主要内容转载自:子龙山人博客(强烈建议去子龙山人博客完全学习一遍) 部分内容查阅自:<Lua 5.3  参考手册>中文版 译者 云风 制作 Kavcc vs2013+lua-5.3.3 在 ...

  10. 算法笔记--单调队列优化dp

    单调队列:队列中元素单调递增或递减,可以用双端队列实现(deque),队列的前面和后面都可以入队出队. 单调队列优化dp: 问题引入: dp[i] = min( a[j] ) ,i-m < j ...