Покажите Выбор Когда вариант выбора будет поднято

Вот вещь: если я выбираю:Покажите Выбор Когда вариант выбора будет поднято

«Африка», выбор Африка будет показан, остальные будут скрыты.
«Америка», выделение Америки будет показано, остальные будут скрыты.

«Азия», Азия Отметка будет показана, остальные будут скрыты. и так далее.

<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 и/или JavaScript на JSFiddle бы Do. Спасибо.

EDIT: Вот что я сделал на 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'; 
}

источник

2014-11-19 Taranee Christine Courtney

Показаны ваши усилия и то, что вы пробовали, сделали бы. Спасибо. – Abhitalks

Теперь это лучше, и мы куда-то идем. Понимаете, вы правильно закодировали действия, но когда будут срабатывать эти действия? Вам нужно связать событие на континенте. – Abhitalks

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

\t .subRegion{ 
 
    display:none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t 
 
</head> 
 

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

 
</html>

источник

2014-11-19 14:20:44 userDEV

Это работает для меня. Я загружу сайт, когда все будет готово. Благодарим вас за то, что вы снова напомнили мне об основах JavaScript. –

Кстати, я надеюсь, что вы мне помогли: [ссылка] (http://jsfiddle.net/MaryWilliameTaraneeChristine/151fnvpy/1/) Страны соответствующих регионов должны появляться, когда выбран определенный регион , Пример: Страны Юго-Восточной Азии - это Бруней, Камбоджа и т. Д. –

У вас есть функция hide1 и hide2, которые делают то же самое. вам нужна функция обмена в субрегионе. Я создам новую ссылку на скрипку и отправлю ее вам – userDEV

Вы забыли привязать событие к 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>

источник

2014-11-19 14:16:30 Abhitalks

Вот что вы можете сделать с помощью 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 
    }); 
});

Вот скрипка для справки 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 
     }); 
    });

источник

2014-11-19 14:30:19 Vicky

Op не отметил тему как jQuery. Op использует простой старый 'Javascript'. – Abhitalks

Покажите Выбор Когда вариант выбора будет поднято

ответ

Смежные вопросы