CODEWITHSUNDEEP
javascriptselectionhidden
Taranee Christine Courtney
Taranee Christine Courtney

Reputation: 15

Show a Selection When a Selection Option is Picked

Here's the Thing: If I Select:

  1. "Africa", Africa Selection will be Shown, the Rest will be Hidden.
  2. "America", America Selection will be Shown, the Rest will be Hidden.

  3. "Asia", Asia Selection will be Shown, the Rest will be Hidden. and So On.

    <select name="continent" id="continent" size="1">
    <option value="Pick a Continent">Pick a Continent First.</option>
    <option value="Africa" class="africa">Africa</option>
    <option value="America" class="america">America</option>
    <option value="Asia" class="asia">Asia</option>
    <option value="Europe" class="europe">Europe</option>
    <option value="Oceania and Pacific" class="oceana">Oceania and Pacific</option>
</select>
    <select name="Africa" id="africa" size="1">
    <option value="Pick a Sub-Region.">Pick a Sub-Region.</option>
    <option value="North Africa">North Africa</option>
    <option value="East Africa">East Africa</option>
    <option value="Central Africa">Central Africa</option>
    <option value="West Africa">West Africa</option>
    <option value="Southern Africa">Southern Africa</option>
</select>
<select name="America" id="america" size="1">
    <option value="Pick a Sub-Region.">Pick a Sub-Region.</option>
    <option value="North America">North America</option>
    <option value="Central America">Central America</option>
    <option value="South America">South America</option>
</select>

CSS and/or JavaScript on JSFiddle would Do. Thank You.

EDIT: Here's What I Did on JavaScript (So Far)

function hide(africa){
    document.getElementById('africa');
    africa.style.visibility = 'hidden';
}

function show(africa){
    document.getElementById('africa');
    africa.style.visibility = 'visible';
}

function hide(america){
    document.getElementById('america');
    america.style.visibility = 'hidden';
}

function show(america){
    document.getElementById('america');
    america.style.visibility = 'visible';
}

Upvotes: 0

Views: 167

Answers (3)

userDEV
userDEV

Reputation: 535

function hide(elem){
		     //hide all sub regions
			for (i = 0; i < document.getElementsByClassName('subRegion').length; i++){ 
				document.getElementsByClassName('subRegion')[i].style.display = 'none';
			}
			
			var sub = elem.value.toLowerCase(); 
			document.getElementById(sub).style.display = 'inline';
			
		}
	.subRegion{
    display:none;
}
<!DOCTYPE html>
<html>
<head>
	
</head>

<body>
	<FORM>
			<select name="continent" id="continent" size="1" onchange="hide(this)">
			<option value="Pick a Continent">Pick a Continent First.</option>
			<option value="Africa" class="africa">Africa</option>
			<option value="America" class="america">America</option>
			<option value="Asia" class="asia">Asia</option>
			<option value="Europe" class="europe">Europe</option>
			<option value="Oceania and Pacific" class="oceana">Oceania and Pacific</option>
		</select>
			<select name="Africa" id="africa" size="1" class="subRegion">
			<option value="Pick a Sub-Region.">Pick a Sub-Region.</option>
			<option value="North Africa">North Africa</option>
			<option value="East Africa">East Africa</option>
			<option value="Central Africa">Central Africa</option>
			<option value="West Africa">West Africa</option>
			<option value="Southern Africa">Southern Africa</option>
		</select>
		<select name="America" id="america" size="1" class="subRegion">
			<option value="Pick a Sub-Region.">Pick a Sub-Region.</option>
			<option value="North America">North America</option>
			<option value="Central America">Central America</option>
			<option value="South America">South America</option>
		</select>
	
	</form>
</body>

</html>

Upvotes: 0

Vicky
Vicky

Reputation: 704

Here is what you can do using Jquery

HTML goes this way

<select name="continent" id="continent" size="1">
    <option value="Pick a Continent">Pick a Continent First.</option>
    <option value="Africa" class="africa">Africa</option>
    <option value="America" class="america">America</option>
    <option value="Asia" class="asia">Asia</option>
    <option value="Europe" class="europe">Europe</option>
    <option value="Oceania and Pacific" class="oceana">Oceania and Pacific</option>
</select>
<select name="Africa" id="africa" size="1" class="subselect">
    <option value="Pick a Sub-Region.">Pick a Sub-Region.</option>
    <option value="North Africa">North Africa</option>
    <option value="East Africa">East Africa</option>
    <option value="Central Africa">Central Africa</option>
    <option value="West Africa">West Africa</option>
    <option value="Southern Africa">Southern Africa</option>
</select>
<select name="America" id="america" size="1" class="subselect">
    <option value="Pick a Sub-Region.">Pick a Sub-Region.</option>
    <option value="North America">North America</option>
    <option value="Central America">Central America</option>
    <option value="South America">South America</option>
</select>

Your css [i have added class subselect for your other select boxes]

.subselect{
    display:none;
}

And then the JS

$(document).ready(function(){
    $('#continent').on('change',function(){            //to capture when option is selected
      var data= $('#continent option:selected').val(); //get the value of selected option
      var selectbox="select[name='"+data+"']";         //finding the respective subselect
        $(selectbox).show();                           //showing the select box required
    });
});

Here is a fiddle for your reference DEMO check it out

And if you want to hide the previous select if user selects a new Continent then use this js

   $(document).ready(function(){
        $('#continent').on('change',function(){            //to capture when option is selected
         $('.subselect').css('display','none');
         var data= $('#continent option:selected').val(); //get the value of selected option
          var selectbox="select[name='"+data+"']";         //finding the respective subselect
            $(selectbox).show();                           //showing the select box required
        });
    });

Upvotes: 1

Abhitalks
Abhitalks

Reputation: 28387

You forgot to bind the event to the continent select.

document.getElementById("continent").addEventListener("change", showhide);

function showhide() {
  var sel = document.getElementById("continent").value;
  if (sel == 'Africa') {
    document.getElementById('africa').style.display = 'inline-block';
    document.getElementById('america').style.display = 'none';
  } else {
    document.getElementById('america').style.display = 'inline-block';
    document.getElementById('africa').style.display = 'none';
  }
  
}
#africa, #america {
  display: none;
}
<select name="continent" id="continent" size="1">
    <option value="Pick a Continent">Pick a Continent First.</option>
    <option value="Africa" class="africa">Africa</option>
    <option value="America" class="america">America</option>
    <option value="Asia" class="asia">Asia</option>
    <option value="Europe" class="europe">Europe</option>
    <option value="Oceania and Pacific" class="oceana">Oceania and Pacific</option>
</select>
<select name="Africa" id="africa" size="1">
    <option value="Pick a Sub-Region.">Pick a Sub-Region.</option>
    <option value="North Africa">North Africa</option>
    <option value="East Africa">East Africa</option>
    <option value="Central Africa">Central Africa</option>
    <option value="West Africa">West Africa</option>
    <option value="Southern Africa">Southern Africa</option>
</select>
<select name="America" id="america" size="1">
    <option value="Pick a Sub-Region.">Pick a Sub-Region.</option>
    <option value="North America">North America</option>
    <option value="Central America">Central America</option>
    <option value="South America">South America</option>
</select>

Upvotes: 0

Related Questions