javascript - Show a Selection When a Selection Option is Picked -
here's thing: if select:
- "africa", africa selection shown, rest hidden.
- "america", america selection shown, rest hidden.
"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
Post a Comment