hiding and showing dropdowns using 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. 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.

<!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>

So if I understand correctly, you have a multi-select dropdown? And please post the code you have. — Samurai
– Samurai, Commented May 30, 2015 at 9:34
<option> elements can't contain anything other than a simple string, no child elements (the nested <b> is invalid. — David Thomas
– David Thomas, Commented May 30, 2015 at 10:05

user786 · Accepted Answer · 2015-05-30 10:00:19Z

1

Try this using 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

edited May 30, 2015 at 10:00

answered May 30, 2015 at 9:36

user786

4,4406 gold badges53 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

harinagarjuna Over a year ago

Thanks! But one thing i needed is if i select three boxes i want the main select box to come below all of them.

Collectives™ on Stack Overflow

hiding and showing dropdowns using javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related