вспытие окошек при выборе select
Добрый вечер!Помогите пожалуйста!!!
Дело в том, что мне нужно при выборе определенного числа, высвечивались окошечки, число которые равно выбранному числу из select. Вот код. но явно что-то не так( div class="line_buttom"> <select class="size_of_buttoms" name="child" onchange="ChildCount(this)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
возраст
<span class="size_of_buttoms">
<input name="agechild[]" class="agechild" style="display: none;" type="text">
<input name="agechild[]" class="agechild" style="display: none;" type="text">
<input name="agechild[]" class="agechild" style="display: none;" type="text">
<input name="agechild[]" class="agechild" style="display: none;" type="text">
<input name="agechild[]" class="agechild" style="display: none;" type="text">
</span>
</div>
и скрипт <script type="text/javascript">
function ChildCount(select)
{
var a=select.value;
if (a==1)
{ document.getElementByTagName("agechild[]").style.display="block";
document.getElementById("agechild[]").style.display="none";
document.getElementById("agechild[]").style.display="none";
document.getElementById("agechild[]").style.display="none";
document.getElementById("agechild[]").style.display="none";
}
if (a==2)
{ document.getElementByTagName("agechild[]").style.display="block";
document.getElementByTagName("agechild[]").style.display="block";
document.getElementById("agechild[]").style.display="none";
document.getElementById("agechild[]").style.display="none";
document.getElementById("agechild[]").style.display="none";
}
if (a==3)
{ document.getElementByTagName("agechild[]").style.display="block";
document.getElementByTagName("agechild[]").style.display="block";
document.getElementByTagName("agechild[]").style.display="block";
document.getElementById("agechild[]").style.display="none";
document.getElementById("agechild[]").style.display="none";
}
if (a==4)
{ document.getElementByTagName("agechild[]").style.display="block";
document.getElementByTagName("agechild[]").style.display="block";
document.getElementByTagName("agechild[]").style.display="block";
document.getElementByTagName("agechild[]").style.display="block";
document.getElementById("agechild[]").style.display="none";
}
if (a==5)
{ document.getElementByTagName("agechild[]").style.display="block";
document.getElementByTagName("agechild[]").style.display="block";
document.getElementByTagName("agechild[]").style.display="block";
document.getElementByTagName("agechild[]").style.display="block";
document.getElementByTagName("agechild[]").style.display="block";
}
}
</script>
|
<div class="line_buttom">
<select class="size_of_buttoms" name="child">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
возраст
<span class="size_of_buttoms">
<input name="agechild[]" class="agechild" style="display: none;" type="text">
<input name="agechild[]" class="agechild" style="display: none;" type="text">
<input name="agechild[]" class="agechild" style="display: none;" type="text">
<input name="agechild[]" class="agechild" style="display: none;" type="text">
<input name="agechild[]" class="agechild" style="display: none;" type="text">
</span>
</div>
<script>
document.querySelector('.size_of_buttoms').onchange = e => document.querySelectorAll('.agechild').forEach((el,i)=>el.style.display = i<+e.target.value?'block':'none');
</script>
|
На данном сайте все запускается, но при вставки в html-файл не работает( С чем это связано? Аж по словам копировал и никак:( |
document.addEventListener("DOMContentLoaded", function(){
document.querySelector('.size_of_buttoms').onchange = e => document.querySelectorAll('.agechild').forEach((el,i)=>el.style.display = i<+e.target.value?'block':'none');
});
так попробуйте, если не заработает смотрите в консоль (может есть в html такие же классы у других блоков) |
я и тут запустил... не работает
https://jsfiddle.net/w25zfLm3/17/ |
извините,что так не могу разобраться. только только начал(((
|
уже все убрал. оставил это. на сайте данном работает https://jsfiddle.net/w25zfLm3/20/ а на компе у меня нет(
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>form</title>
<link href="./css/style.css" rel="stylesheet">
<script>
document.addEventListener("DOMContentLoaded", function(){
document.querySelector('.size_of_buttoms').onchange = e => document.querySelectorAll('.agechild').forEach((el,i)=>el.style.display = i<+e.target.value?'block':'none');
});
</script>
</head>
<body>
<div class="line_buttom">
<select class="size_of_buttoms" name="child">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
возраст
<span class="size_of_buttoms">
<input name="agechild[]" class="agechild" style="display: none;" type="text">
<input name="agechild[]" class="agechild" style="display: none;" type="text">
<input name="agechild[]" class="agechild" style="display: none;" type="text">
<input name="agechild[]" class="agechild" style="display: none;" type="text">
<input name="agechild[]" class="agechild" style="display: none;" type="text">
</span>
</div>
</body>
</html>
|
Извиняюсь!Все работает!ОГРОМНОЕ ВАМ СПАСИБО!!!
|
| Часовой пояс GMT +3, время: 22:43. |