Как реализовать последовательный выбор select (не совсем такой, как описывают во всех советах)?

Question

[pashabomber]

Необходимо реализовать следующую вещь.
Идет select со списком станций московского метро. У каждого option, соответственно, свой id. По умолчанию выбран option без id и значения. Если пользователь выбирает один из option со значением, то снизу появляется точно такой же select. Если во втором select'e выбрать один из option, то появляется еще один точно такой же select. И так далее, пока человек выбирает в каждом новом select'e один вариантов. Но при этом должен быть лимит, допустим, в 10 select'ов.

<select>
<option></option>
<option id="1">Жулебино</option>
<option id="2">Лермонтовский проспект</option>
<option id="3">Выхино</option>
</select>

Выбираем один из трех вариантов (на сайте их больше сотни), снизу появляется снова select:

<select>
<option></option>
<option id="1">Жулебино</option>
<option id="2">Лермонтовский проспект</option>
<option id="3">Выхино</option>
</select>

Comments

[Andrey K]

А чем multiselect не угодил?

[pashabomber]

поступила задача сделать именно так, как описал в вопросе.

[Юрий Лобанов]

@pashabomber куда пропали?

Answer 1

[Юрий Лобанов]

На странице не должно быть двух элементов с одинаковым id. Так что сразу шлите заказчика. В остальном реализовать просто, вот так например:
codepen.io/iiil/pen/LAcoj
При выборе отличного от нулевого значения появляется еще один такой же селект. Максимальное количество задаете в переменной imax, сейчас там 5 штук. Старые можете менять, к появлению нового селекта приводит изменение только последнего селекта.

Comments

[pashabomber]

спасибо!

Answer 2

[Виталий Киренков]

Создаёте изначально такой селект и прячете его. Далее на onChange делаете проверку, что если value !== "", то тогда склонировать и вставить в документ второй. И на каждое новое клонирование делать приписку к value, чтобы оно было уникальным, типа
select-1-val-1, select-1-val-2, select-2-val-1

Comments

[Виталий Киренков]

P.S. аналогично, если вы будете использовать ajax, с ним наверно даже будет проще, ибо сервак уже будет отдавать правильные value и вам не придётся высчитывать.

Answer 3

[mumrum]

создать селект с выбором нескольких значений аттрибут multiple:
htmlbook.ru/html/select/multiple

либо такой:
ivaynberg.github.io/select2/#tags