顯示基於第一個下拉列表的第二個下拉列表不起作用

Question

我是學習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>

有人可以告訴我我在做什么錯嗎？

Answer 1

使用以下內容，使用JQuery來檢測首次選擇中的更改-並按照Scott所說的那樣包含JQuery

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

Answer 2

看來您正在嘗試使用jquery（JavaScript代碼中的$）。 但是，您尚未在html中指定jquery腳本。

嘗試添加這個

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

在頭部之間

顯示基於第一個下拉列表的第二個下拉列表不起作用

問題描述

2 個解決方案

解決方案1
0 2015-03-12 17:26:13

解決方案2
0 已采納 2015-03-12 17:26:22

顯示基於第一個下拉列表的第二個下拉列表不起作用

問題描述

2 個解決方案

解決方案1 0 2015-03-12 17:26:13

解決方案2 0 已采納 2015-03-12 17:26:22

解決方案1
0 2015-03-12 17:26:13

解決方案2
0 已采納 2015-03-12 17:26:22