Скрыть\показать элементы

Sick · March 4, 2013

Добрый вечер.

Прошу помочь мне, зеленому новичку, понять... Почему работает вот это:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	    <head>
			    <meta http-equiv="Content-Type" content="text/html;">
			    <title>vicont</title>
    <style type='text/css'>
					    #i1,#i2,#i3{display:none}	  
			    </style>
    <script type='text/javascript'>
					    <!--
					    function showhideBlocks(val){
							    if (val == 0){
								    document.getElementById('i1').style.display='none';
								    document.getElementById('i2').style.display='none';
								    document.getElementById('i3').style.display='none';
							    }
							    else{
								   document.getElementById('i1').style.display='none';
								   document.getElementById('i2').style.display='none';
								   document.getElementById('i3').style.display='none';   
								   document.getElementById('i'+val).style.display='block'; 
							    } 
					    }
					    -->
			    </script>
    </head>
	    <body>
			    <select name="items" onchange="showhideBlocks(this.value)">
					    <option value="0">Показать.</div>
					    <option value="1">1
					    <option value="2">2
					    <option value="3">3
			    </select>
			    <div id="i1">тут набор html элементов №1</div>
			    <div id="i2">тут набор html элементов №2</div>
			    <div id="i3">тут набор html элементов №3</div>
	    </body>
</html>

и не работает вот это:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<style type="text/css">
#i1,#i2,#i3,#i4{
display: none;
}
</style>
<script type="text/javascript">
<!--
Function showhideBlocks(val){
  if (val == 0){
								    document.getElementById('i1').style.display='none';
								    document.getElementById('i2').style.display='none';
								    document.getElementById('i3').style.display='none';
		 document.getElementById('i4').style.display='none';
							    }
							    else{
								   document.getElementById('i1').style.display='none';
								   document.getElementById('i2').style.display='none';
								   document.getElementById('i3').style.display='none';  
		   document.getElementById('i4').style.display='none';
								   document.getElementById('i'+val).style.display='block'; 
							    } 
} -->
</script>
</head>
<body>
<select name="tip" onchange="showhideBlocks(this.value)">
<option value="0">Выберите тип ТС</option>
<option value="1">Мотоциклы и мотороллеры (ТС категории "A")
<option value="2">Легковые автомобили (ТС категории "B")
<option value="3">Грузовые автомобили (ТС категории "С")
<option value="4">Автобусы (ТС категории "D")
</select><br/>
<div id="i1">
  <input type="text">
</div>
<div id="i2">
  <input type="text">
</div>
<div id="i3">
  <input type="text">
</div>
<div id="i4">Элемент №4</div>
</body>
</html>

Под работает я имею в виду что нужный элемент показывается при выборе соответствующего пункта, а остальные прячутся.

Во втором примере скрипту все равно какой пункт я выберу, он не хочет ничего показывать.

Прошу вас помочь мне, потому что я своими экспериментами ни к чему не пришел.

Int · March 7, 2013

А если попробовать <option> закрывать? И закрывать не тэгом <div>? Можно это на jsfiddle всё скинуть? Самому лень.

Sick · March 14, 2013

Интересный расклад получается, но когда залил на jsfiddle, то вот этот вариант: http://jsfiddle.net/Sick/2fQ92/3/ (который вроде бы работал через браузер) тоже перестал реагировать на выбор пунктов в списке.

<option> везде закрыл, не помогло.

Edited March 14, 2013 by Sick

Switch74 · March 15, 2013

тут много нюансов

1. почитайте про doctype

2. правильно закрывайте теги

3. и самое главное function в js объявляется с маленькой буквы а не с большой

Sick · March 15, 2013

Всем спасибо за помощь.

Проблема была здесь:


document.getElementById('i'+val).style.display='block'; 
                                                                } 
} -->
</script>

а конкретно в том что } и --> должны быть на разных строках.

Edited March 15, 2013 by Sick

Sign In

Скрыть\показать элементы

Question

Sick

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Int

Link to comment

Share on other sites

Sick

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

Sick

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information