Почему Safari 10.1.2 всё равно показывает скрытые (display: none) пункты в select?

Question

[Vic Shóstak]

Доброго времени года!

Почему Safari 10.1.2 всё равно показывает скрытые (display: none) пункты в select? Вопрос довольно интересный, особенно учитывая, что это почти тот же WebKit, что в других браузерах (и там это отрабатывает, как надо). Также, никаких проблем с этим не наблюдается и в последнем FireFox.

В стилях прописано option:disabled {display: none;}.

Поясню «зачем мне это надо»: делаю сложную форму на Vue.js, где каждое следующее поле зависит от выбранного значения из option предыдущего поля. Есть же Select2, скажите вы – да, есть, но мне нужны так же и все выбранные значения, а не только последнее, как делает этот плагин. Ввиду этого, и не найдя другого варианта, чтобы скрывать все option с атрибутом disabled, которые не подходят к текущему срезу-выборке – решил спросить тут :)

Удалять и обратно добавлять через JS (через el.remove(), например) – не сработает, так как для обратного действия (добавления в select удалённых option) нужно будет заново обновлять все поля, которые были выбраны ранее. Ведь все пункты select всех полей – берутся из стороннего API (JSON).

Подскажите, что можно с этим сделать?

Answer 1

[Дмитрий]

css в данном случае не поможет, пробуйте
<option hidden>Hidden option</option>

или же можно использовать что-то похожее на select2 или chosen

Comments

[Vic Shóstak]

hidden точно так же не срабатывает, https://jsfiddle.net/ak7kvqzt/

Вопрос по Select2/Chosen: они сохраняют в отдаваемом значении (при POST запросе к серверу при сабмите формы, например) все значения, которые были выбраны на промежуточных стадиях выборки или только последнее? Просто для моей формы это критично.

[Дмитрий]

Vikky Shostak, события срабатывают как при использовании обычного select