Показать/скрыть определенные поля на основе списка выбора

Question

Я пытаюсь использовать JavaScript и/или jQuery, чтобы скрыть некоторые элементы html на основе того, какой элемент выбран в выпадающем меню. Эта страница выглядит так:

[Drop down menu] 

[text field 1] 
[text field 2] 
[text field 3] 
[text field 4] 
[text field 5] 

Выпадающее меню имеет 3 варианта. Для первого варианта должны отображаться поля 1-4. Для второго должны быть доступны 2-4, а для третьих полей 2-5.

У меня есть JSFiddle demo here. В частности, я не понимаю, почему

<option value="option3.com" onselect="$('#five').hide()">option3.com</option> 

не скрывает «#five»

Answer 1

Во-первых, нет onselect, вы, вероятно, хотел onchange.
Во-вторых, вы используете jQuery, поэтому используйте его.
В-третьих, измените разметку, чтобы каким-то образом включить то, что вы хотите, атрибуты данных великолепны.

<select style="width: 120px;" name="farm_in" id="farm_in"> 
    <option></option> 
    <option value="option1.com" data-show="[1,2,3,4]">option1.com</option> 
    <option value="option2.com" data-show="[2,3,4]">option2.com</option> 
    <option value="option3.com" data-show="[2,3,4,5]">option3.com</option> 
</select> 
<br> 
<input style="width: 120px;" type="text" name="one" id="el1" value="one"> 
<br> 
<input style="width: 120px;" type="text" name="two" id="el2" value="two"> 
<br> 
<input style="width: 120px;" type="text" name="three" id="el3" value="three"> 
<br> 
<input style="width: 120px;" type="text" name="four" id="el4" value="four"> 
<br> 
<input style="width: 120px;" type="text" name="five" id="el5" value="five"> 

Тогда все, что вам нужно сделать, это

$('#farm_in').change(function() { 
    $('input').hide(); 
    $('#el' + $('option:selected', this).data('show').join(', #el')).show(); 
}); 

FIDDLE

Answer 2

Для начала, это не идентифицирует элемент в вашем DOM:

$('#five') 

Вы надеваете» t имеет элемент с id от "five". Вместо этого, вы ищете это:

$('input[name="five"]') 

(Или, наоборот, вы могли бы дать атрибут id для ваших элементов.)

Помимо этого, я не знаю ни одного onselect события для элемент option. Почему бы не реагировать на change случае select вместо (и де-пару из разметки немного, пока вы на него) ?:

$('select').on('change', function() { 
    if ($(this).val() === 'option3.com') { 
     $('input[name="five"]').hide(); 
    } else { 
     $('input[name="five"]').show(); 
    } 
}); 

Answer 3

Глядя на вас скрипку вы теряете идентификатор атрибуты для вашего текста поля.

<input style="width: 120px;" type="text" name="five" value="five"> 

Должно быть:

Кроме того, я бы порекомендовал вам разделив JS из вашего HTML.