If Select tag option is selected shows another select tag

Question

I need code either in js or jquery or php like this.

<select id="1">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option> 
</select>

If option value 3 is selected, it should populate another select like

<select id="2">
-
-
</select>

if not value 3 is selected nothing happens.

The question is a bit confusing. The header talks about _showing_ a select tag based on the selected option, the text talks about _populating_. Which one do you actually want to do? Or both? — Teemu, Jan 07 '15 at 17:32

score 2 · Accepted Answer · answered Jan 07 '15 at 17:33

You can do this by hiding and showing the other select depending on the value that is chosen (unless you want to populate the results dynamically after clicking option 3 in which case you will have to be more specific)

HTML

<select id="select1">
  <option>Choose One</option>
  <option value="1">Val 1</option>
  <option value="2">Val 2</option> 
  <option value="3">Val 3</option> 
</select>

<select id="select2">
  <option>Choose Two</option>
  <option value="1">Val 1</option>
  <option value="2">Val 2</option>
  <option value="3">Val 3</option> 
</select>

CSS

#select2{
   display: none;
}

JS

$("#select1").change(function(){
    if($(this).val() == 3){
      $("#select2").show();
    }else{
      $("#select2").hide();
    }

});

FIDDLE

score 1 · Answer 2 · answered Jan 07 '15 at 17:45

Here is a PURE Javascript Solution

See this fiddle

Javascript

function myFunction() {
    var x = document.getElementById("id1").value;
    if (x == "3") document.getElementById("id2").style.display = "block";
}

HTML

<select id="id1" onchange="myFunction()">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<select id="id2">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

CSS

#id2 {
    display:none;
}

score 0 · Answer 3 · answered Jan 07 '15 at 17:36

Use this

Html

<select id="1">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option> 
</select>

<select id="2" style="display:none;">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option> 
</select>

Your Jquery Here

$("#1").change(function(){
    if($(this).val() == 3){
      $("#2").show();
    }else{
      $("#2").hide();
    }

});

score 0 · Answer 4 · answered Jan 07 '15 at 17:53

Try this..

<select id="1" class="first">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option> 
</select>

<select id="2" style="display:none;">
<option value="1">....</option>
<option value="2">....</option>
<option value="3">....</option> 
</select>

$(".first").change(function(){
var selectvalue=$(".first").val();
if(selectvalue==3)
{
$("#2").show();
} else {

$("#2").hide();
}

});

If Select tag option is selected shows another select tag

4 Answers4

Here is a PURE Javascript Solution

Linked