选择选项时显示选择

Question

这就是事情：如果我选择：

1. ＆＃34;非洲＆＃34;，将展示非洲选择，其余部分将被隐藏。
2. ＆＃34; America＆＃34;，将展示America Selection，其余部分将被隐藏。

3. ＆＃34;亚洲＆＃34;，亚洲选择将被展示，其余将被隐藏。 等等。

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

JSFiddle上的CSS和/或JavaScript会做。谢谢。

编辑：这是我在JavaScript上做了什么（迄今为止）

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';
}

Answer 1

以下是使用Jquery

可以做的事情

HTML就是这样

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

你的css [我为你的其他选择框添加了class subselect]

.subselect{
    display:none;
}

然后是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
    });
});

这是一个小提琴，供您参考DEMO查看

如果你想隐藏上一个选择，如果用户选择一个新的大陆，那么使用这个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
        });
    });

Answer 2

您忘了将活动绑定到continent选择。

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>

Answer 3

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>