显示基于第一个下拉列表的第二个下拉列表不起作用

Showing 2nd Dropdown based on First drop down not working

本文关键字：下拉列表 不起作用 第二个 第一个 显示      更新时间：2023-09-26

我是一个学习Web开发的新手。我正在尝试创建一个带有两个下拉列表的简单表单。基于第一个下拉列表，第二个下拉应该是可见的。

但它不起作用：

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
 <div class="container">
    <div class="box">
    <form>
  <div class="ccms_form_element cfdiv_custom">
                <div class="col-md-4">
                    <label for="inputType">Input Type</label></div>
                <div class="col-md-8" style="font-size:16pt;">
                    <select id="inputType" required name="inputType" style="width:500px" onChange="ChangeDropdowns();">
                        <option value="">Select Type : Type Of You Want to Process</option>
                        <option value="text">Text  </option>
                        <option value="genome">Numbers</option>
                        <option value="chacha">Special Characters</option>
                    </select>
                </div>
            </div>
  </div>
   <div class="style-sub-1" id="dataType" style="display: none;" >
                <div class="col-md-4">
                    <label for="inputType">Data Type</label></div>
                <div class="col-md-8" style="font-size:16pt;">
                    <select id="data" required name="data" style="width:500px">
                        <option value="">Select Data Source : Where is your Data?</option>
                        <option value="text">Data is already in Server</option>
                        <option value="genome">Need to Upload the File</option>
                    </select>
                </div>
                  </div>
                    <div class="row">

<script>
function ChangeDropdowns() {  
$(".style-sub-1").show();
}
</script>
</body>
</html>

有人可以告诉我我在这里做错了什么吗？

看起来你正在尝试使用jquery（javascript代码中的$）。但是，您尚未在 html 中指定 jquery 脚本。

尝试添加此内容

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>

在头块之间

使用以下命令，使用 JQuery 检测第一个选择中的更改 - 并包括 JQuery 正如 Scott 所说

$( document ).ready(function() {
  $("#inputType").on('change', function (){
    $(".style-sub-1").show();
  });
});
相关文章：