时间戳

首页 > 解决方案 > 如何在更改另一个下拉 jquery 中的任何值时显示具有某些值的新下拉列表

html - 如何在更改另一个下拉 jquery 中的任何值时显示具有某些值的新下拉列表

问题描述

我有一个包含值 A 和 B 的下拉列表。只有当我更改下拉列表中的任何值（“mySelect”）时，我才需要获取另一个包含一组值 1、2、3、4 的下拉列表。我不需要根据选择更改值。我只需要显示另一个下拉列表（'newSelect'）。

下拉1：

  <select id="mySelect" title="" disabled="disabled">
                        <option value="">Select</option> 
                        <option value="A">A</option>
                        <option value="B">B</option>
  </select>

如果我更改下拉列表 1 的值，我需要获取另一个下拉列表（下拉列表 2）

下拉菜单 2：

<select id="newSelect" title="" disabled="disabled">
                        <option value="">Select</option> 
                        <option value="1">Open</option>
                        <option value="2">Closed</option>
                        <option value="3">Reopen</option>
                        <option value="4">InProgress</option>
</select>

请告诉我如何实现这一目标。

标签： htmljquery

解决方案

有多种选择。如果用户从第一个菜单中选择任何值，我相信您只想显示另一个下拉菜单。您可以使用 onChange 功能并显示第二个菜单。出于测试目的，我删除了 disabled 属性。

const   subMenu = document.getElementById("newSelect");
const mainMenu = document.getElementById("mySelect");

window.onload = function() {
  subMenu.style.display = "none";
}   
        
mainMenu.onchange = function () {
  subMenu.style.display = "block";
}
<!DOCTYPE html>
<html>
<head>
    
</head>
    <body>
        <select id="mySelect" title="">
            <option value="">Select</option> 
            <option value="A">A</option>
            <option value="B">B</option>
        </select>

        <select id="newSelect" title="" >
            <option value="">Select</option> 
            <option value="1">Open</option>
            <option value="2">Closed</option>
            <option value="3">Reopen</option>
            <option value="4">InProgress</option>
    </select>  
</body>
</html>

推荐阅读