Как отображать определенные данные в select в зависимости от значений в другом select?

Question

[Дмитрий Быстров]

Здравствуйте! У меня на страницу есть два <select>. В каждом из них располагаются даты в формате dd.mm.yyyy.

<select id="s1">
        <option value="" selected disabled>Дата1</option>
        <option value="">27.01.2018</option>
        <option value="">17.02.2018</option>
        <option value="">24.03.2018</option>
        <option value="">31.04.2018</option>
        <option value="">06.05.2018</option>
</select>

<select id="s2">
        <option value="" selected disabled>Дата2</option>
        <option value="">27.01.2018</option>
        <option value="">17.02.2018</option>
        <option value="">24.03.2018</option>
        <option value="">31.04.2018</option>
        <option value="">06.05.2018</option>
</select>

Как я могу сделать так, чтобы при выборе даты в s1, в s2отображались только те даты, которые "старше", чем выбранная дата в s1.

Answer 1

[Stalker_RED]

https://jsfiddle.net/mdzuww6v/1

Comments

[Сергей Герасимов]

Не хватает равенства, при сравнении, получается что одинаковые даты можно выбрать

[Stalker_RED]

Сергей Герасимов, вы правы, подправил

[Дмитрий Быстров]

Спасибо за ответ! Лаконичное решение. А можно ли не использовать таблицу стилей, а прописать это тоже в коде?

[Stalker_RED]

Дмитрий Быстров, можно.

[Дмитрий Быстров]

Stalker_RED, Могли бы Вы сказать, как это сделать?

[Stalker_RED]

Дмитрий Быстров, вместо строчки где toggleClass сделать .css('display' ...) например.
https://jsfiddle.net/mdzuww6v/3/