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

@Teshuhack · Регистрация: 25.07.2015

Author24 — интернет-сервис помощи студентам

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

HTML5

<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?

@Mr_Sergo · 18.04.2018, 08:30

Сообщение от Teshuhack

Как я могу сделать

Если я правильно вас понял то может так:
Песочница

HTML5

<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>

Javascript

qwerty();
function qwerty() {    
    var s1 = document.getElementById('s1');
    var s2 = document.getElementById('s2');
    var s1date, datee;
 
    s1.addEventListener('change',function(){
        var selected = this.selectedIndex, arr=[], yy, mm, dd, newDate;
        selected = new Date( s1[selected].text.replace(/(\d+).(\d+).(\d+)/, '$3/$2/$1') );
 
        for(i=1; i<s1.length; i++){
            s1date = new Date(s1[i].text.replace(/(\d+).(\d+).(\d+)/, '$3/$2/$1'));
            if(selected < s1date){
                arr.push( new Option(s1date, "значение") );
            }
            if(i+1==s1.length){
                s2.innerHTML = '<option value="" selected disabled>Дата2</option>';
                for(j=0; j<arr.length; j++){
                    newDate = new Date(arr[j].text);
                    yy = newDate.getFullYear();
                    mm = newDate.getMonth()+1;
                    dd = newDate.getDate();
 
                    (dd<10) ? dd='0'+dd : dd; (mm<10) ? mm='0'+mm : mm;
                    arr[j].text = dd+'.'+mm+'.'+yy;
                    s2.options[s2.length] = arr[j];
                }
            }
        }
    },false);
}

Потестите- напишите все ли верно или что-то не так. Если что-то не так то объясните.

Добавлено через 20 минут

Сообщение от Teshuhack

У меня на страницу есть два <select>

Кстати, у вас ошибка в дате, 31-го апреля в 2018г. нету, да и по-моему вообще нету.

@Teshuhack · 18.04.2018, 18:48 **[ТС]**

Сообщение от zlojnaxa

Потестите- напишите все ли верно или что-то не так. Если что-то не так то объясните.

При выборе любой даты из первого списка, во втором отображается дата "01.05.2018". Такой даты нет ни в одном списке.

Сообщение от zlojnaxa

Кстати, у вас ошибка в дате, 31-го апреля в 2018г. нету, да и по-моему вообще нету.

Всё верно. Это тестовые данные.

@Mr_Sergo · 19.04.2018, 08:57

Сообщение от Teshuhack

во втором отображается дата "01.05.2018". Такой даты нет ни в одном списке.

Я же вам написал

Сообщение от zlojnaxa

Кстати, у вас ошибка в дате, 31-го апреля в 2018г. нету, да и по-моему вообще нету.

Почитайте прежде чем говорить что скрипт работает неправильно- из скрина понятно почему во втором списке отображается дата "01.05.2018" вместо "31.04.2018"...
Ну а в остальном все верно?

@Mr_Sergo · 19.04.2018, 09:09

Корректные даты пишите и не будет он отображать "01.05.2018"

@diadiavova · 19.04.2018, 11:09

Teshuhack, как вариант можно просто скрывать ненужные элементы второго списка. В данном случае "старше" понимается как "позже", но это легко поменять, изменив знак > в 26-ой строке на противоположный.

PHP/HTML

        <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="">30.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="">30.04.2018</option>
            <option value="">06.05.2018</option>
        </select>
 
        <script>
            document.getElementById("s1").addEventListener("change", function (evt)
            {
                let parse = s => Date.parse(s.split(".").reverse().join("-"));
                for (const option of document.querySelectorAll("#s2>option"))
                {
                        let s1text = evt.target.options[evt.target.selectedIndex].textContent;
                        option.style.display = parse(option.textContent) > parse(s1text) ? "block" : "none";
                }
            });
        </script>

Добавлено через 1 минуту
Некорректные даты не обрабатываются (по крайней мере в лисе), поэтому 31-е апреля заменил тридцатым.

Новые блоги и статьи
Администрирование Git, продвинутые техники работы с Git InfoMaster 11.01.2025 Основы управления репозиторием Эффективное управление Git-репозиторием требует глубокого понимания механизмов контроля доступа и инструментов администрирования. Рассмотрим ключевые аспекты. . .	Что такое HCL Notes и как с ним работать InfoMaster 10.01.2025 HCL Notes (ранее известный как IBM Notes и Lotus Notes) представляет собой комплексную платформу для совместной работы и обмена информацией в корпоративной среде. Это многофункциональное решение,. . .	Как работать с Git из Windows и Visual Studio InfoMaster 10.01.2025 Работа с Git в Windows Работа с Git в операционной системе Windows может быть осуществлена с помощью различных инструментов, каждый из которых обладает своими уникальными возможностями и. . .	Аналог оператора switch case в Python InfoMaster 10.01.2025 Оператор switch case используется в программировании для выбора одного из нескольких вариантов исполнения кода. Однако в языке Python этот оператор отсутствует. Понимание аналогов switch case в. . .	Отличия абстрактного класса от интерфейса InfoMaster 10.01.2025 В современной разработке программного обеспечения существуют два основных механизма реализации абстракции: абстрактные классы и интерфейсы. Эти инструменты, хотя и схожи в своей основной цели -. . .	Как работать в Git InfoMaster 10.01.2025 Git — это одна из наиболее популярных систем контроля версий, которая активно используется разработчиками по всему миру. Она позволяет эффективно управлять изменениями в коде, координировать работу. . .
Реализация передвижения персонажа в Unity3d на C# InfoMaster 10.01.2025 Реализация передвижения персонажа в Unity3D начинается с правильной настройки проекта. Этот этап критически важен для создания отзывчивого и плавного управления. Рассмотрим основные шаги для создания. . .	Docker: руководство для начинающих InfoMaster 10.01.2025 В современном мире разработки программного обеспечения контейнеризация стала неотъемлемой частью процесса создания и развертывания приложений. Docker, как ведущая платформа контейнеризации, произвела. . .	Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .	Что такое NullReferenceException и как исправить? InfoMaster 08.01.2025 NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .	Что такое Null Pointer Exception (NPE) и как это исправить? InfoMaster 08.01.2025 Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .	Русский язык в консоли C++ InfoMaster 08.01.2025 При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .

@Teshuhack 35 / 35 / 21 Регистрация: 25.07.2015 Сообщений: 165
	18.04.2018, 18:48 [ТС]	3
	Сообщение от zlojnaxa Потестите- напишите все ли верно или что-то не так. Если что-то не так то объясните. При выборе любой даты из первого списка, во втором отображается дата "01.05.2018". Такой даты нет ни в одном списке. Сообщение от zlojnaxa Кстати, у вас ошибка в дате, 31-го апреля в 2018г. нету, да и по-моему вообще нету. Всё верно. Это тестовые данные. 0

@Mr_Sergo 2036 / 1095 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	19.04.2018, 08:57	4
	Сообщение от Teshuhack во втором отображается дата "01.05.2018". Такой даты нет ни в одном списке. Я же вам написал Сообщение от zlojnaxa Кстати, у вас ошибка в дате, 31-го апреля в 2018г. нету, да и по-моему вообще нету. Почитайте прежде чем говорить что скрипт работает неправильно- из скрина понятно почему во втором списке отображается дата "01.05.2018" вместо "31.04.2018"... Ну а в остальном все верно? Миниатюры 0

@Mr_Sergo 2036 / 1095 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	19.04.2018, 09:09	5
	Корректные даты пишите и не будет он отображать "01.05.2018" 0

	19.04.2018, 11:09