javascript - Show a Selection When a Selection Option is Picked -


here's thing: if select:

  1. "africa", africa selection shown, rest hidden.
  2. "america", america selection shown, rest hidden.
  3. "asia", asia selection shown, rest hidden. , on.

    <select name="continent" id="continent" size="1">     <option value="pick continent">pick 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 , pacific" class="oceana">oceania , pacific</option> </select>     <select name="africa" id="africa" size="1">     <option value="pick sub-region.">pick 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 sub-region.">pick 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 do. thank you.

edit: here's 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'; } 

function hide(elem){  		     //hide sub regions  			for (i = 0; < 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 continent">pick 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 , pacific" class="oceana">oceania , pacific</option>  		</select>  			<select name="africa" id="africa" size="1" class="subregion">  			<option value="pick sub-region.">pick 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 sub-region.">pick 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>


Comments

Popular posts from this blog

java - Oracle EBS .ClassNotFoundException: oracle.apps.fnd.formsClient.FormsLauncher.class ERROR -

c# - how to use buttonedit in devexpress gridcontrol -

nvd3.js - angularjs-nvd3-directives setting color in legend as well as in chart elements -