javascript - 选择选择选项时显示选择

Question

事情是这样的:如果我选择:

1. “非洲”，非洲部分将显示，其余部分将被隐藏。
2. “美国”，美国部分将显示，其余部分将被隐藏。

3. “亚洲”，亚洲精选将显示，其余将被隐藏。等等。

   <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 [我已经为你的其他选择框添加了类子选择]

.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
    });
});

这是一个 fiddle 供您引用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
        });
    });