因工作需要，做了一个下拉单的二级联动。
第一级是固定的选项，有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. Docker6之Network containers

    how to network your containers. Launch a container on the default network Docker includes support fo ...

  2. Codeforces 884C.Bertown Subway ----判环，思路

    The construction of subway in Bertown is almost finished! The President of Berland will visit this c ...

  3. C语言 分割字符串

    对指针的操作有点迷糊 只好采用下面一些比较low的手段 char str[100]; char delims[] = ";"; char *result = NULL; sprin ...

  4. Vs Code搭建 TypeScript 开发环境

    一.npm install -g typescript 全局安装TypeScript   二.使用Vs Code打开已创建的文件夹,使用快捷键Ctrl+~启动终端输入命令 tsc --init 创建t ...

  5. C#题目及答案（2）

    1. NET和C#有什么区别 答:.NET一般指 .NET FrameWork框架,它是一种平台,一种技术. C#是一种编程语言,可以基于.NET平台的应用. 2．一列数的规则如下: 1.1.2.3. ...

  6. webpack插件配置（一） webpack-dev-server 路径配置

    本文的路径配置主要涉及到webpack.config.js文件中devServer与output两个选项的配置 webpack-dev-server定义 webpack-dev-server主要是启动 ...

  7. Codeforces 242 E. XOR on Segment

    题目链接:http://codeforces.com/problemset/problem/242/E 线段树要求支持区间求和,区间内每一个数字异或上一个值. 既然是异或,考虑每一个节点维护一个长度为 ...

  8. 【BZOJ】1831: [AHOI2008]逆序对

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1831 考虑$-1$的位置上填写的数字一定是不降的. 令${f[i][j]}$表示$DP$到 ...

  9. 使用外网访问阿里云服务器ZooKeeper

    参考网址: zookeeper单机/集群安装详解 使用外网访问阿里云服务器ZooKeeper 阿里云服务管理控制台 1. 阿里云ECS安装zookeeper 环境:我安装的是zookeeper3.4. ...

  10. AFM(3)---Maude使用说明

    load file-name 1可用绝对路径 2.可进入maude文件所在目录下load 3.默认工作空间是什么?