Как скрывать/показывать поле в зависимости от выбранного в списке?

[nikki4]

есть обычный список, и пару текстовых полей. Как делается так, что при выборе "красного" автоматически активируется поле куда надо ввести что-то красное, а поле для зеленого - скрыто. как только выбирается зеленый цвет, то красное поле пропадает, и предлагают ввести зеленое

 

<select name="color">
<option value="red" >красный/option>
<option value="green">зеленый</option>
</select>

<input type="text" name="red_color" value="введите что-то красное"  />
<input type="text" name="green_color" value="введите что-то зеленое" />

 

[nikki4]

решение вопроса

https://jsfiddle.net/0y992bav/

[DivMan]

Пытаюсь сделать, и почему-то, если выбрать если выбрать зелёный, то его значение не выводится

http://plnkr.co/edit/SuVIjdkoMGoTPDIIIqCK?p=info

http://plnkr.co/edit/fCvVDymflIi7H3uAELNq?p=info

Я не понимаю, почему условие работает только 1 раз?

Edited October 12, 2016 by DivMan

[ows.nightwolf]

http://jsbin.com/nodoqesala/edit?html,js,output

[nikki4]

2 часа назад, ows.nightwolf сказал:

http://jsbin.com/nodoqesala/edit?html,js,output

Спасибо. А что значит value + color?

var activeField = this.selectedOptions[0].value+'_color';?

Пытаюсь адаптировать Ваш код под реальную форму. Но что-то не работает. Видимо это из-за _color, но на что его поменять

http://jsbin.com/towivixopa/edit?html,js,output

т.е. есть выбран 1 пункт из списка, скрыть последние 2 поля и отобразить 1

если выбран второй пункт. то скрыть 1 и 3 поле, отобразить 2

если выбран 3 пункт - отобразить все

[ows.nightwolf]

var activeField = this.selectedOptions[0].value+'_color';

Тут имя поля генерируется на основании значения выбранного в поле select (если выбрано "red" то поле которое должно отображаться будет "red" + "_color"  = "red_color")

У вас мой пример работать не будет - все разбросано по странице, я предполагал что это все находится в одной форме.

Вам тогда можно задать для всех нужных input'ов id, а для пунктов select'а их значения (value) давать равными этим id'шникам (чтоб когда выбран определенный пункт в select'е можно было узнать какой input отображать). По событию change на selecte надо будет проходится по всем его пунктам, брать хранящиеся в них id, скрывать элементы с этими id, а потом отобразить тот который выбран (опять же, взяв его id из свойства value выбранного пункта). Но это уже сами реализуйте, принцип такой же как я выше написал.

Edited October 12, 2016 by ows.nightwolf