因工作需要，做了一个下拉单的二级联动。
第一级是固定的选项，有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. WijmoJS 全面支持 Angular 7

    概述 首先恭喜Angular团队发布Angular 7.0.0版本! 对于大多数开发人员,只需要执行一个命令就可以更新到Angular 7: ng update \@angular/cli \@ang ...

  2. WinForm 中 comboBox控件数据绑定

    一.IList 现在我们直接创建一个List集合,然后绑定 IList<string> list = new List<string>(); list.Add("11 ...

  3. React Naive 解决防止多次点击的解决方法

    export default class TouchableOpacity extends Component { render() { return ( <TouchableOpacity a ...

  4. ES6中Promise的入门(结合例子)

    一.Promise的前言 解决回调地狱 //以往回调方式 函数1(function(){ //代码执行...(ajax1) 函数2(function(){ //代码执行...(ajax2) 函数3(f ...

  5. 基于 Python 和 Pandas 的数据分析(5) --- Concatenating and Appending

    这一节我们将会介绍几种不同的合并数据的方法. 在我们这个不动产投资的例子中, 我们希望获取 51 个州的房产数据, 并把它们组合起来. 我们这样做有很多原因. 这样做既便于我们做分析, 同时也可以占用 ...

  6. Reversion Count

    字符串基础用法题,包含有大数减法大数除法模板,不难理解,代码如下: #include<stdio.h> #include<string.h> #include<strin ...

  7. 使用ajax判断登录用户名

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Register.aspx. ...

  8. STL_头文件

    #include <string> #include <vector> #include <deque> #include <queue> #inclu ...

  9. [osg]osg绘制动态改变顶点的几何体

    最简单的顶点数据更新方法是预先获取setVertexArray()所用的数组数据,并对其进行更新.但是对于开启显示列表支持的几何体(这是默认的情况)来说,有一个问题需要特别需要引起注意,即显示列表中的 ...

  10. Codefroces 958C2 - Encryption (medium)

    C2 - Encryption (medium) 思路: 传统的dp: dp[i][j] 表示到第i个位置为止,分成j段的最大值 dp[i][j] = max(dp[l][j-1] + (sum[i] ...