文章/答案/技术大牛

发布

社区首页 >问答首页 >使用javascript隐藏和显示下拉列表

问使用javascript隐藏和显示下拉列表
EN

Stack Overflow用户

提问于 2015-05-30 09:29:33

回答 1查看 46关注 0票数 1

我很困惑如何编写这段代码。实际上我的要求是..。我有一个5下拉框，其中第一个应该是不变的，其他应该保持隐藏。根据在第一个下拉框中选择的选项，我需要显示其他下拉列表。但棘手的部分来了..。比如说..。我在主下拉框中选择了" 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>

javascript

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-05-30 09:36:00

使用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>

如果这是你想要的，请告诉我

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30544485

复制

相似问题

问使用javascript隐藏和显示下拉列表
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用javascript隐藏和显示下拉列表EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用javascript隐藏和显示下拉列表
EN