Форум

maxim339 · #1 (**permalink**) 07.10.2011, 13:50

Доброго времени суток.
Столкнулся с проблемой. Суть такова, необходимо в зависимости от выбора 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>

ksa · #2 (**permalink**) 07.10.2011, 13:55

Сообщение от maxim339

Как это организовать с помощью JavaScript без перезагрузки страницы?

Ответ есть в любом учебнике по JS и поисковиках...

maxim339 · #3 (**permalink**) 07.10.2011, 14:03

А подсказать никак? Уже голову сломал над этим и много форумов прочитал, вот только в моем примере не получается использовать

ksa · #4 (**permalink**) 07.10.2011, 14:07

Сообщение от maxim339

А подсказать никак?

По ссылке валом примеров...

Сообщение от maxim339

Уже голову сломал над этим

Это враньё.

Невозможно "сломать голову" над букварской задачкой. Поскольку там нужно просто знать приёмы:
- привязка к событию
- передача значения в функцию
- поиск/взятие элемента
- как делается эфект показать/спрятать

maxim339 · #5 (**permalink**) 07.10.2011, 14:12

ksa,

Например с простой гиперссылкой все работает, а вот со списком появляются проблемы - попросту не работает...

Цитата:

Невозможно "сломать голову" над букварской задачкой.

С JavaScript я далек, так что для меня это непростая задача... Просто срочно понадобилось сделать, а как не знаю...

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>

maxim339 · #6 (**permalink**) 07.10.2011, 14:14

Необходимо в зависимости от выбора из списка "vibor" появлялось или поле text-1 или список "list-1"

ksa · #7 (**permalink**) 07.10.2011, 14:32

Сообщение от maxim339

поправьте код пожалуйста, чтобы он работал как надо.

Тестовый пример безусловно плюс. В любом случае это орден "Шолкового умника"! (с) передачка Умники и умницы

<!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>

maxim339 · #8 (**permalink**) 07.10.2011, 14:39

Спасибо за помощь!

+1 к рейтингу!

Форум

Справочник

Discord чат

Курсы javascript