Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > смена дивов

Автор: Sufius 19.11.2005, 19:40

Код


<html>
<head>
<title>Test</title>
<script type="text/javascript">
function show_div(div_id) {
document.getElementById('the_div_1').style.display = 'none';
document.getElementById('the_div_2').style.display = 'none';
document.getElementById('the_div_3').style.display = 'none';
document.getElementById(div_id).style.display = 'block';
} </script>
</head>
<body>
<a href onclick="show_div('the_div_1'); return false;">
<p>Div 1 </a><a href onclick="show_div('the_div_2'); return false;">Div 2 </a><a href
onclick="show_div('the_div_3'); return false;">Div 3 </a></p>
<div id="the_div_1">
<p>div 1</p>
</div><div style="display: none;" id="the_div_2">
<p>div 2</p>
</div><div style="display: none;" id="the_div_3">
<p>div 3</p>
</div>
</body>
</html>

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

используя форму

Код


<p><select size="1" name="choose_div">
  <option value="">Div_1</option>
  <option value="">Div_2</option>
  <option value="">Div_3</option>
</select> </p>

Автор: Ciber_SLasH 19.11.2005, 21:16

1) записываешь ID дивов в value каждого option-а
2) обходишь все option-ы своего select-а и анализируешь дивы по ID, которые записаны в value текущего option-а. Если option — выбран, то показываешь див, ID которого записано в value текущего option-а, и скрываешь все остальные дивы

Автор: Sufius 19.11.2005, 21:50

Код


<select size="1" name="name" onchange="show_div('.value'); return false;">
  <option value="the_div_1">1</option>
  <option value="the_div_2">2</option>
  <option value="the_div_3">3</option>
</select>

в чём ошибка? smile

Автор: Ciber SLasH 19.11.2005, 22:26

Ошибка в том, что:
1) ты передаёшь строку, а не ссылку на объект
2) ты не анализируешь value option-ов (сами собой они анализироваться не умеют)

Вот как нужно было:

Код

<html>
<head>
<script type='text/javascript'>
function MyFunc(obj) {
var opt = obj.options;
  for (var i = 0; i < opt.length; i++)
    if (opt[i].selected) document.getElementById(opt[i].value).style.display = '';
    else document.getElementById(opt[i].value).style.display = 'none';
}
</script>
</head>

<body>
<select onChange='MyFunc(this)'>
    <option value="div_1">1</option>
    <option value="div_2">2</option>
</select>
<div id='div_1' style='display: none'>11111111111</div>
<div id='div_2' style='display: none'>22222222222</div>
</body>
</html>