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

    应用范围的不同 结点介绍 原理介绍 异常 web.config详解

  2. java web项目在linux部署、启动，查看系统配置常用的linux命令总结

    本文为博主原创,未经允许不得转载: 以下为在工作中常用的linux命令进行了总结,主要在项目安装及启动,及编辑部署文件时应用较多1.gz文件是一种压缩文件. 以·tar.gz为扩展名的是一种压缩文件, ...

  3. Javascript 高级程序设计（第3版） - 第01章

    2017-05-10 js简介 一个叫“不难登”的人发明的.js的流行是因为 ajax 的关系. js分为三个部分: 核心: ECMAScript 文档对象模型: DOM 浏览器对象模型: BOM 核 ...

  4. sublime 代码段

    demo 展示助手中有经常用到个标签. <textarea type="text/md_x" style="display:none"> ## de ...

  5. Lintcode35-Reverse Linked List-Easy

    35. Reverse Linked List Reverse a linked list. Example Example1:For linked list 1->2->3, the r ...

  6. cookie 简单用法

    cookie 简单用法 //当前登录人的组织Id HttpCookie SingleValueCookie = new HttpCookie("DepartmentId", &qu ...

  7. jquery 封装页面之间获取值

    最近在项目中发页面传值比较繁琐.View →  Control → View,或是Session.Cookie 的 感觉不是很好,于是封装了一个页面间的js方法,上码 $.extend({ reque ...

  8. C++ 空字符('\0')和空格符(' ')

    1.从字符串的长度:-->空字符的长度为0,空格符的长度为1. 2.虽然输出到屏幕是一样的,但是本质的ascii code 是不一样的,他们还是有区别的. #include<iostrea ...

  9. QQ帐户的申请与登陆-（字符串操作）

    题目: 实现QQ新帐户申请和老帐户登陆的简化版功能.最大挑战是:据说现在的QQ号码已经有10位数了. 输入格式: 输入首先给出一个正整数N(≤10^5),随后给出N行指令.每行指令的格式为:“命令符( ...

  10. ros 充电topic

    #!/usr/bin/env python #coding=utf- import rospy from std_msgs.msg import String i= def talker(): glo ...