Как сделать так, чтобы отображалась только одна форма?

Question

[Twelfth Doctor]

Здравствуйте! У меня есть вот такой код: https://jsfiddle.net/fsx19twu/
Вопрос:
1. Как сделать так, чтобы при выборе какого-то элемента из списка, если какая-то другая форма уже отображается, то она бы исчезала, а на её месте появлялась бы новая.
2. Если сначала выбрать первый пункт из выпадающего списка (A), то форма не появляется, а если выбрать сначала какой-то другой пункт и только потом A-запись, то всё работает - как это исправить?
Вариант с использованием только одной формы и изменением в ней placeholder'а не подходит.

Comments

[Ankhena]

Вроде логичнее, если форма form одна, а в ней показываются/скрываются, например, fieldset или просто нужные инпуты.

Answer 1

[Arman]

Зачем много форм? Тем более они одинаковые, только placeholder отличается. Сделайте одну форму с текущим селектом, когда меняется селект, то меняйте placeholder, на сервер проверяйте что в селекте то и сохраняйте

Comments

[Twelfth Doctor]

Они не совсем одинаковые. У A и AAAA записей (насколько я знаю) нет приоритета.

[Arman]

verdex: так можно скрывать и показывать смотря какое значение https://jsfiddle.net/m8comfxe/ желательно не делать пробелы между ключем и значением аргументов

Answer 2

[Pretor DH]

Ваш JSfiddle слегка подправленный.

Можете посмотреть решение на чистом CSS:
https://jsfiddle.net/pretordh/8wa2zb0r/

Comments

[Twelfth Doctor]

Если перед этим селектом добавить ещё один, то всё исчезает.

[Pretor DH]

verdex: Уточните... где и перед каким селектом.