js实现级联下拉列表

忘是亡心i 2022-03-15 09:35 365阅读 0赞

效果图：

![20190301193935424.png][]![20190301194000250.png][]

### HTML: ###

<select class="form-control" onchange="changeCondition(this.value)">
                                                <option value="0">----请选择查询条件----</option>
                                                <option value="1">打分分类</option>
                                                <option value="2">完成状态</option>
                                            </select>
    
                                            <select class="form-control" id="condition">
                                                <option value="">----请选择查询条件----</option>
                                            </select>

### JS: ###

<script>
        let arrCondition = [
            ["----请选择查询条件----"],
            ["论文","答辩"],
            ["未完成","已完成"]
        ];
    
        function changeCondition(index) {
            let conditions = arrCondition[index];
            let condition1 = document.getElementById('condition');
            condition1.length = 0;
            for (let i = 0; i < conditions.length; i++) {
                let opt = document.createElement("option");
                opt.innerHTML = conditions[i];
                condition1.appendChild(opt);
            }
        }
    </script>

[20190301193935424.png]: https://img-blog.csdnimg.cn/20190301193935424.png
[20190301194000250.png]: /images/20220315/88481587edc44fa99376464f0665cb9d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，365人围观）

还没有评论，来说两句吧...

相关阅读

相关 Ajax案例---实现级联列表

目录 Ajax案例---实现级联列表代码： select.html List.java 效果： -------------------- Ajax案例---实

痛定思痛。/ 2024年03月22日 17:21/ 0 赞/ 47 阅读

相关 js面向对象封装级联下拉菜单列表的实现步骤

本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素。点击文本框后，显示一级菜单。如果菜单中包含子菜单，菜单右侧会有指示箭头。点击菜单之后，会再显示下一级菜单，以此类

小咪咪/ 2022年10月29日 07:37/ 0 赞/ 161 阅读

相关搜索下拉框级联

$('\cat\_type').change(function()\{ var id = $(this).children(

左手的ㄟ右手/ 2022年08月10日 16:32/ 0 赞/ 254 阅读

相关 ext_comboBox二级级联下拉框

代码示例： Ext.onReady(function()\{ var store = new Ext.data.Store(\{ proxy: new Ext.data.Ht

Bertha 。/ 2022年08月10日 11:47/ 0 赞/ 222 阅读

相关【JQuery】——级联下拉框效果

【html】 <html> <head> <title>JQuery实例-级联下拉框效果</title> <meta http-

柔情只为你懂/ 2022年07月14日 01:37/ 0 赞/ 275 阅读

相关 javascript使用select标签如何实现省市联动,级联下拉列表

select对象属性： options：获得所有的option对象,返回option的数组 selectIndex：获得当前选中项在option中的索引号方

Dear 丶/ 2022年05月16日 20:33/ 0 赞/ 450 阅读

相关总结之下拉列表级联操作（一）——简单使用JQuery实现

下拉列表的级联操作在日常使用中十分平常我们先简单的使用JQuery代码实现下拉列表级联操作先看一下下拉列表代码国家：<select id="s

亦凉/ 2022年05月13日 09:10/ 0 赞/ 202 阅读

相关 js实现级联下拉列表

效果图： ![20190301193935424.png][]![20190301194000250.png][] HTML: <select class="

忘是亡心i/ 2022年03月15日 09:35/ 0 赞/ 366 阅读

相关 [编]使用CascadingDropDown实现级联式下拉框

使用CascadingDropDown实现级联式下拉框引言级联式下拉框，有时也叫联动下拉框，也是Web页面中一个很常见的功能。就是假设有若干个下拉框，比如说有3

今天药忘吃喽~/ 2022年01月05日 17:47/ 0 赞/ 317 阅读

相关 js如何实现下拉控制列表

js如何实现下拉控制列表重要属性介绍： ondblclick="selectOne()"：双击事件 select标签的属性： multiple="multiple"：

小灰灰/ 2020年06月03日 12:29/ 0 赞/ 711 阅读