<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style type="text/css">
#if_girl{display: none;clear: both;}
#ifn_girl{display: none;clear: both;}
</style>
</head>
<body>
<select id="is_girl" onChange='showSelect()'>
<option value='0'>Мальчик</option>
<option value='1'>Девочка</option>
</select>
<br>
<select id="if_girl" onChange='showSelect()'>
<option value="1">Собака</option>
<option value="0">Кошка</option>
</select>
<br>
<select id="ifn_girl" onChange='showSelect()'>
<option value="1">Пёс</option>
<option value="0">Кот</option>
</select>
<script>
const isGirl = document.getElementById("is_girl").value;
if(isGirl == 1){
document.getElementById("if_girl").style.display = "inline";
document.getElementById("ifn_girl").style.display = "none";
}
else if(isGirl == 0){
document.getElementById("ifn_girl").style.display = "inline";
document.getElementById("if_girl").style.display = "none";
}
function showSelect(){
const isGirl = document.getElementById("is_girl").value;
if(isGirl == 1){
document.getElementById("if_girl").style.display = "inline";
document.getElementById("ifn_girl").style.display = "none";
}
else if(isGirl == 0){
document.getElementById("ifn_girl").style.display = "inline";
document.getElementById("if_girl").style.display = "none";
}
}
</script>
</body>
</html>
МальчикДевочка
СобакаКошка
ПёсКот
<br>. Выйти из ситуации можно хоть так, к примеру:br ~ br {
display: none;
}
Простой
Простой
Простой
Простой
Простой
Простой
