隐藏和显示下拉列表使用JavaScript

Question

I am in a very confused state how to write this code. 我处于一种非常困惑的状态，如何编写此代码。 Actually my requirement is .. I have a 5 drop down boxes in which first one should be constant and others should remain hidden. 实际上，我的要求是..我有5个下拉框，其中第一个框应保持不变，而其他框应保持隐藏状态。 Based on the option selected in the first drop down box i need to display other drop downs. 基于在第一个下拉框中选择的选项，我需要显示其他下拉菜单。 But here comes the tricky part... If for example.. i have selected "java" option in main drop down box java drop down box should appear , if again i select another option along with java box another drop down box should also appear. 但是这里是棘手的部分...例如，如果..我在主下拉框中选择了“ java”选项，则应该显示java下拉框；如果再次选择Java选项，则又出现另一个下拉框。

<!DOCTYPE html><body>
<select name="select"  value="select" id="skill" onchange="check(this[this.selectedIndex].value)">
<option value="select"><b>select<b>
<option id="vjava" value="java"><b>java<b>
<option value="dotnet"><b>dotnet<b>
<option value="oracle"><b>oracle<b>
<option value="MSBI"><b>msbi<b>
<option value="powerbuilder"><b>powerbuilder<b>
</select>
<br>
<br>
<span id="javan"><b>java<b></span><select id="java">
<option value="beginner"><b>Beginner<b>
<option value="intermediate"><b>Intermediate<b>
<option value="expert"><b>Expert<b>
</select>
<br>
<br>
<span id="dotnetn"><b>.Net<b></span><select id="dotnet">
<option value="beginner"><b>Beginner<b>
<option value="intermediate"><b>Intermediate<b>
<option value="expert"><b>Expert<b>
</select>
<br>
<br>
<span id="oraclen">Oracle</span><select id="oracle">
<option value="beginner">Beginner
<option value="intermediate">Intermediate
<option value="expert">Expert
</select>
<br>
<br>
<span id="msbin">Msbi</span><select id="msbi">
<option value="beginner"><b>Beginner
<option value="intermediate"><b>Intermediate<b>
<option value="expert"><b>Expert<b>
</select>
<br>
<br>
<span id="powerbuildern"><b>Powerbuilder<b></span><select id="powerbuilder">
<option value="beginner"><b>Beginner<b>
<option value="intermediate"><b>Intermediate<b>
<option value="expert"><b>Expert<b>
</select>
</body></html>

Answer 1

Try this using Jquery 使用jQuery尝试

 $("#main").on("change", function() { if ($("#main").val() == "Java") { $("#Java").removeClass("h"); $("#Java").addClass("s"); } if ($("#main").val() == ".net") { $("#Net").removeClass("h"); $("#Net").addClass("s"); } if ($("#main").val() == "C#") { $("#C").removeClass("h"); $("#C").addClass("s"); } })

 .h { display: none; } .s { dsplay: block; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <select multiple id="main"> <option>Java <option> <option>.net <option> <option>C# <option> </select> <select id="Java" class="h"> <option>Java</option> </select> <select id="Net" class="h"> <option>.Net</option> </select> <select id="C" class="h"> <option>C#</option> </select>

Let me know if that what u are asking 让我知道你在问什么

隐藏和显示下拉列表使用JavaScript

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-05-30 09:36:00

隐藏和显示下拉列表使用JavaScript

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-05-30 09:36:00

解决方案1
1 已采纳 2015-05-30 09:36:00