Как изменить текстовое поле на видимое в зависимости от того, какой элемент выбран в раскрывающемся меню?

У меня есть раскрывающееся меню со списком школьных предметов в нем, последний вариант – «Добавить новый предмет», поэтому, когда пользователь выбирает этот параметр, мне нужно, чтобы появилось текстовое поле.

Моя форма HTML выглядит следующим образом: (Я включил только соответствующие биты, на нем есть немного больше.

<form method="post" action="createQuestion.php" name="cq"> <select name="subject" id="subject"> <option value="biology">Biology</option> <option value="maths">Maths</option> <option value="economics">Economics</option> <option value="newSub" <?php if($subject == "newSub1") { echo "SELECTED"; } ?>> Add New Subject </option> </select> <input type="text" name="newSubtxt" ID="newSubtxt" style="visibility:hidden"> </form> 

Я потратил годы, пытаясь заставить это работать с javascript, и я просто не могу заставить его работать вообще.

Это js я написал, но не работает

 function addSubject(){ newSub = document.getElementById('newSub').name selectedSubject = document.getElementById('subject').value if (selectedSubject == newSub){ document.getElementById(newSubtxt).style.display = 'block'; }} 

Я был бы так благодарен, если бы кто-то помог мне с javascript, чтобы он сработал. Заранее спасибо 🙂

Solutions Collecting From Web of "Как изменить текстовое поле на видимое в зависимости от того, какой элемент выбран в раскрывающемся меню?"

Измените стиль текстового поля на

 <input type="text" name="newSubtxt" ID="newSubtxt" style='display:none;'> 

Я использовал jQuery (javascript library), чтобы решить вашу проблему.

 $(document).ready(function () { $('#subject').change(function (){ if($('#subject').val()=='newSub') $('#newSubtxt').show(); else $('#newSubtxt').hide(); }); }); 

Смотрите мой jsfiddle

Измените свой невидимый вход на:

 <input type="text" name="newSubtxt" id="newSubtxt" style="display: none" /> 

и ваши js:

 function addSubject() { var selectedSubject = document.getElementById('subject').value; if (selectedSubject == 'newSub') { document.getElementById('newSubtxt').style.display = 'block'; } } 

Также см. Мой jsfiddle .