因工作需要，做了一个下拉单的二级联动。
第一级是固定的选项，有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. Linux下 查看CPU信息

    参考: Linux和Windows下查看cpu和core个数 Linux下 查看CPU信息 1.查看完整CPU信息: $ cat /proc/cpuinfo 2.查看逻辑cpu个数: $ cat /p ...

  2. oracle批量删除某用户下的表

    昨天干了一天的体力活,到快下班时被要求删除一批测试库上错误的表,主要是这些表的字段和生产上字段顺序对不上,然后让我写个脚本,让dba执行一下,主要是删表这种东西我们都没权限. 然后,我就被难到了,我记 ...

  3. JS实现ul,li排序效果

    <!DOCTYPE html> <html> <head> <title>js列表排序</title> <meta charset=& ...

  4. TCGA收官之作—27篇重磅文献绘制“泛癌图谱”

    TCGA的关键数字:图片来源<细胞> 由美国政府发起的癌症和肿瘤基因图谱(Cancer Genome Atlas,TCGA)计划于2006年联合启动,目前已经收录了来自1万多例病人的33种 ...

  5. 使用git上传项目到github的最基础命令

    一.前言 把github作为自己项目托管的地方,实在是一个明智的选择.就算你不为自己项目考虑,你也要为你团队项目开发而学呀!可能有些初学者(比如我)会觉得git命令好多啊,又是各种术语,觉得好难上手. ...

  6. 【三十二】thinkphp之连接数据库、实例化模型

    1.连接数据库 Thinlphp内置了抽象数据库访问层,把不同的数据操作封装起来.我们只需要调用公共的DB类进行操作即可.DB类会自动调用相应的数据库驱动来处理. 在应用目录/common/conf/ ...

  7. ES6的新API如Promise,Proxy,Array.form(),Object.assign()等,Babel不能转码, 使用babel-polyfill来解决

    Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator.Generator.Set.Maps.Proxy.Reflect.Symbol.Promis ...

  8. 虹软人脸识别Android Sample Code

    AFR_FSDKInterface engine = new AFR_FSDKEngine(); //用来存放提取到的人脸信息, face_1 是注册的人脸,face_2 是要识别的人脸 AFR_FS ...

  9. js正则表达式的积累

    验证数字:^[0-9]*$ 验证n位的数字:^\d{n}$ 验证至少n位数字:^\d{n,}$ 验证m-n位的数字:^\d{m,n}$ 验证零和非零开头的数字:^(0|[1-9][0-9]*)$ 验证 ...

  10. linux中tar命令（打包、压缩、解压）、zip和unzip、rar多种压缩文件

    一.名词解释 打包:将一大堆文件或目录变成一个总的文件[tar命令] 压缩:将一个大的文件通过一些压缩算法变成一个小文件[gzip,bzip2等] Linux中很多压缩程序只能针对一个文件进行压缩,这 ...