Появление элементов форм
Доброго времени суток.
Столкнулся с проблемой. Суть такова, необходимо в зависимости от выбора SELECT, чтобы выводился соответствующий элемент формы, а другой был невидим, например при выборе в выпадающем списке пункта "Текстовое поле" появлялось текстовое поле, а список был невидим и наоборот. Как это организовать с помощью JavaScript без перезагрузки страницы? Заранее благодарен за помощь
<form method="post" action="">
<select size="1" name="vibor">
<option value="text-1">Текстовое поле</option>
<option value="list-1">Список 1</option>
</select>
<input type="text" name="text-1" size="40" />
<select size="1" name="lis-1">
<option value="1">Текстовое поле</option>
<option value="2">Список 1</option>
<option value="3">Список 2</option>
</select>
<form>
|
Цитата:
|
А подсказать никак? Уже голову сломал над этим и много форумов прочитал, вот только в моем примере не получается использовать :cray:
|
Цитата:
Цитата:
Невозможно "сломать голову" над букварской задачкой. Поскольку там нужно просто знать приёмы: - привязка к событию - передача значения в функцию - поиск/взятие элемента - как делается эфект показать/спрятать |
ksa,
Например с простой гиперссылкой все работает, а вот со списком появляются проблемы - попросту не работает... Цитата:
P.S. Если это такая "букварская задача" для Вас, поправьте код пожалуйста, чтобы он работал как надо. Заранее благодарен :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="kostap" />
<title>Неназванный 3</title>
<style>
#text-1, #list-1 {display:none;}
</style>
</head>
<body>
<form method="post" action="">
<select size="1" name="vibor">
<option value="text-1">Текстовое поле</option>
<option value="list-1">Список 1</option>
</select>
<input type="text" id="text-1" size="40" />
<select size="1" id="list-1">
<option value="1">Текстовое поле</option>
<option value="2">Список 1</option>
<option value="3">Список 2</option>
</select>
<form>
</body>
</html>
</body>
</html>
|
Необходимо в зависимости от выбора из списка "vibor" появлялось или поле text-1 или список "list-1" :)
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
-->
<style type="text/css">
#list-1 {
display: none;
}
</style>
<script type="text/javascript">
function Go(Obj) {
var i,od,o=document.getElementById(Obj.value)
for (i=0; i<Obj.options.length; i++) {
od=document.getElementById(Obj.options[i].value)
od.style.display=(od==o)? 'inline': 'none'
}
}
</script>
</head>
<body>
<form method="post" action="">
<select size="1" name="vibor" onchange='Go(this)'>
<option value="text-1">Текстовое поле</option>
<option value="list-1">Список 1</option>
</select>
<input type="text" id="text-1" size="40" />
<select size="1" id="list-1">
<option value="1">Текстовое поле</option>
<option value="2">Список 1</option>
<option value="3">Список 2</option>
</select>
<form>
</body>
</html>
</body>
</html>
|
Спасибо за помощь! :) +1 к рейтингу!
|
| Часовой пояс GMT +3, время: 13:48. |