Форум

BLP · #1 (**permalink**) 22.10.2012, 03:22

Подскажите, пожалуйста...

Есть SELECT с onChange

<select name="PB2001" id="PB2001" class="text" onblur="checkPassword()" onChange="fifeno()">
                  <option value="?">?</option>
                  <option value="no">no</option>
                  <option>(BG) NFF LO</option>
                  <option>(BG) NFF RX</option>
                  <option>(AT) KKO LO</option>
</select>

и скрипт на выполнение измемения значения... Смысл которого в следующем...
Если выбрано значение Селекта "no", то появляются еще 2 поля для ввода... Если выбраны другие значения - то эти поля - невидимы (как и по умолчанию при загрузке страницы)

<script>
function fifeno() { if (document.getElementById('PB2001').value='no'){ 
                document.getElementById('PB').style.display='block';
                document.getElementById('PN').style.display='block';
                document.getElementById('PBT').style.display='block';
                  }
               else {
               document.getElementById('PB').style.display='none';
               document.getElementById('PN').style.display='none';
               document.getElementById('PBT').style.display='none';
                }}
                			</script>

Проблема:
При загрузке страницы "другие поля" невидимы, т.е. ОК
Если выбираю значение "no" - то 2 невидимых поля появляются. НО! После этого какое бы значение , отличное от "no" я не выбирал бы - все равно "no", т.е. не возможно установить другое значение.

Что не так? Или как? ))

Помогите, плз. Оч. надо!

Your · #2 (**permalink**) 22.10.2012, 04:41

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Example</title>
	<style type="text/css">
		#input{display:none;}
	</style>
</head>
<body>
	<select name="PB2001" onchange="fifeno(this)">
		<option value="?">?</option>
		<option value="no">no</option>
		<option value="(BG) NFF LO">(BG) NFF LO</option>
		<option value="(BG) NFF RX">(BG) NFF RX</option>
		<option value="(AT) KKO LO">(AT) KKO LO</option>
	</select>
	<input name="input" id="input" value="Появился">
	<script type="text/javascript">
		function fifeno(self) {
			var input=document.getElementById('input');
			if('no'==self.value) {
				if(!input.style.display) {
					input.style.display='block';
				}
			} else if('block'==input.style.display) {
				input.style.display='';
			}
		}
	</script>
</body>
</html>

BLP · #3 (**permalink**) 22.10.2012, 09:54

Спасибо. Заработало.
Извините, что сразу все не написал, но возникла следующая ситуация.
У меня 3 скрытых поля, что нужно дописать...что бы 3 поля скрывались и появлялись сразу.
Я попробовал добавить в скрипт второй вар, но не помогло

var input=document.getElementById('input');
var input=document.getElementById('input2');

lord2kim · #4 (**permalink**) 22.10.2012, 10:01

BLP, обращаться к свойству display у каждого по отдельности...
или засунуть все поля в какой-нибудь блок, например, div или span, и скрывать уже его

BLP · #5 (**permalink**) 22.10.2012, 15:43

Спасибо, получилось... ))) Но, как всегда, цепная реакция...
Вообщем, задача еще немного усложняется (надеюсь это у меня последнее).
Как прописать, чтобы при вводе значения "no" - первое поле (input)) появлялось, а второе (input2)- скрывалось...
При значении "?" - скрывались оба поля, а при выборе остальных значений, первое (input) - скрывалось, а второе (input2) - появлялось... (Вот задачка для меня! Полдня перепробовал варианты, в результате - Здесь засуну, там вылезет, там засуну, здесь вылазит... )))

<body>
	    <select name="PB2001" onchange="fifeno(this)">
        <option value="?">?</option>
	        <option value="no">no</option>
	        <option value="(BG) NFF LO">(BG) NFF LO</option>
	        <option value="(BG) NFF RX">(BG) NFF RX</option>
	        <option value="(AT) KKO LO">(AT) KKO LO</option>
	    </select>
	    <input name="input" id="input" value="Появился">
	    <input name="input2" id="input2" value="Появился">
	    <script type="text/javascript">
	        function fifeno(self) {
            var input=document.getElementById('PB');
            var input2=document.getElementById('PN');
			
            if('no'==self.value) {
               if(!input.style.display) {
                    input.style.display='block';
                     input2.style.display='';
               }
            } else if('block'==input.style.display) {
                input.style.display='';
                input2.style.display='block';
			}
	        }
	    </script>
	</body>

Your · #6 (**permalink**) 22.10.2012, 17:03

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Example</title>
	<style type="text/css">
		#input input{display:none;}
	</style>
</head>
<body>
	<select name="PB2001" onchange="fifeno(this)">
		<option value="?">?</option>
		<option value="no">no</option>
		<option value="two">two</option>
		<option value="(BG) NFF LO">(BG) NFF LO</option>
	</select>
	<div id="input">
		<input name="input1" value="Появился1">
		<input name="input2" value="Появился2">
	</div>
	<script type="text/javascript">
		function arrayInput() {
			return document.getElementById('input').getElementsByTagName('input');
		}
		function inputStyle(key) {
			return arrayInput()[key].style;
		}
		function inputToggle(val) {
			for(var i in arrayInput()) {
				if(true===val || i==val) {
					inputStyle(i).display='block';
				} else {
					inputStyle(i).display='';
				}
			}
		}
		function fifeno(self) {
			if('no'==self.value) {
				inputToggle(0);
			} else if('?'==self.value) {
				inputToggle();
			} else if('two'==self.value) {
				inputToggle(true);
			} else {
				inputToggle(1);
			}
		}
	</script>
</body>
</html>

lord2kim · #7 (**permalink**) 22.10.2012, 17:08

BLP,

<body>
	    <select name="PB2001" onchange="fifeno(this)">
        <option value="?">?</option>
	        <option value="no">no</option>
	        <option value="(BG) NFF LO">(BG) NFF LO</option>
	        <option value="(BG) NFF RX">(BG) NFF RX</option>
	        <option value="(AT) KKO LO">(AT) KKO LO</option>
	    </select>
	    <input name="input" id="input" value="Появился1">
	    <input name="input2" id="input2" value="Появился2">
	    <script type="text/javascript">
	        function fifeno(self) {
            var input=document.getElementById('input'), input2=document.getElementById('input2');
			
                  switch (self.value) {
                      case "no": { input.style.display = "block"; input2.style.display = "none"; break; }
                      case "?": { input.style.display = "none"; input2.style.display = "none"; break; }
                      default: { input.style.display = "none"; input2.style.display = "block"; break; }
                  }
	        }
	    </script>
	</body>

BLP · #8 (**permalink**) 22.10.2012, 17:22

Пока попробовал код от lord2kim ...
почему-то вообще ни на что не реагирует (((

Ща попробую код от YOUR

--------------
2 минуты спустя...
Уряяя! lord2kim , спасибо. Все получилось по-Вашему. ))) Просто немного запутался в переменных и именах полей... (Здесь я упрощенно их писал, чтобы не путать, у себя полей больше и с другими именами (отличными от input1, 2 и т.д.)

Форум

Справочник

Discord чат

Курсы javascript