JS как сделать привязку(прослушку) между двумя блоками "select"

Question

У меня есть 2 блока селект, которые заполняются через JS массивами данных. В первый блок поступают даты(от сегодня на 2 недели вперед), во второй поступают массивы (одинаковые внутри) с временем работы. Плохо знаю JS, поэтому прошу подсказать как сделать связь 'ключ-значение'(прослушку) - к каждому "option" из первого "select" был привязан массив из второго "select"(к каждой опции первого селекта был привязан массив из второго).

введите сюда код JS(модальное окно где выводятся селекты) 
document.addEventListener('DOMContentLoaded', function() {

    document.querySelector("#test1").addEventListener('click', function() {

        let pop_up_template = `<div class="modal-header">
                            <h3 class="modal-title"><?= $productTitle ?></h3>
                            <div class="modal-img"><img src="<?= $item['DETAIL_PICTURE']['SRC'] ?>" alt="prod"></div>
                    </div>
                    <div class="modal-body">
                            <form>
                                <p>Телефон/Дата/Время</p>
                                <input type="text" id="phone" placeholder="+7 (___ ) ___ - __ - __"/>
                                <span class="span-zakaz"> К этому времени заказ будет
                                    ожидать Вас в салоне </span>
                                <div class="chosedate">
                                    <p>Удобные дата и время самовывоза</p>
                                    <h6 class="h6date"></h6>
                                    // селекты где выводятся данные
                                    <select id="popup-date">
                                    </select>
                                    <select id="popup-time">
                                        //массив должен будет заполнять так второй селект при выборе даты
                                        <option value="10:00">10:00</option>
                                        <option value="11:00">11:00</option>
                                        <option value="12:00">12:00</option>
                                        <option value="13:00">13:00</option>
                                        <option value="14:00">14:00</option>
                                        <option value="15:00">15:00</option>
                                        <option value="16:00">16:00</option>
                                        <option value="17:00">17:00</option>
                                        <option value="18:00">17:00</option>
                                        <option value="18:00">18:00</option>
                                        <option value="19:00" id="delete-time">19:00</option>
                                    </select>
                                    
                                <div>
                                <div class="checkbox">
                                    <input class="custom-checkbox" type="checkbox" id="color-1" name="color-1"
                                        value="indigo">
                                    <label for="color-1">
                                        <p>Согласие с <a>политикой конфиденциальности</a> и <a>обработкой
                                                персональных данных</a></p>
                                    </label>
                                </div>
                                <button type="submit">Заказать</button>
                            </form>
                    </div>`;
        Swal.fire({
            html: pop_up_template,
            showCloseButton: true,
            customClass: {
                container: 'gggggg',
                popup: 'modal-content',
            },
        });
        getDates(document.querySelector('#popup-date'))
        var element = document.getElementById('phone');
        var maskOptions = {
            mask: '+{7}(000)000-00-00'
        };
        var mask = IMask(element, maskOptions);

        flatpickr("#datadata", {
            dateFormat: "d M",
            minDate: "today",
            maxDate: new Date().fp_incr(14),
            "locale": "ru"
        });
        

        function changeTemplate() {
            $('.flatpickr-calendar').prependTo('.swal2-html-container');
        }
        // $(document).ready(changeTemplate);
        $(window).resize(changeTemplate);
    });
});

Скрипт на вычисление дат и недоделанный пока массив с времнем(так как не знаю пока как подвязать его c 'option' из первого селекта - из-за этого не могу составить логику)

введите сюда код JS
  function getDates(node) {
//создание и запушивание дат
let test = new Date()
let testNow = test.getTime()
let f = 24
let data = []
data.push(test)
for (let i = 0; i < 13; i++) {
    let para = document.createElement("option");
    console.log(f)
    let curData = new Date(testNow + f * 3600 * 1000)
    let formatedDate = curData.toLocaleDateString('ru-RU', {
        month: 'long',
        day: 'numeric'
    })
    f = f + 24
    para.innerHTML = formatedDate
    para.value = formatedDate
    node.appendChild(para)
}
console.log(data)




let zero = 0
let testDay = test.getDay()

// массив с созданием новых массивов которые заполнены временем
let accounts = [];

for (var i = 0; i <= 13; ++i) {
    accounts[i] = ["10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00"];
}

console.log(accounts);

}

Answer 1

Меняем select на вот такие в HTML документе

<select id="popup-date"></select>
<select id="popup-time"></select>

в javaScript файл вставляем следующий код (Он должен быть инициализирован после загрузки HTML)

// Массив дат. Замените на ваши входные данные
const date = [
  '01.01.2022',
  '02.01.2022',
  '03.01.2022',
];
// Массив времен (по условию он один для всех дат). Замените на ваши входные данные
const times = [
  '10:00',
  '11:00',
  '12:00',
  '13:00',
  '14:00',
];
// Тут будет лежат индекс выбранной даты
let nowDate = 0;
// Тут лежит соответствие даты времени
const choise = {}
// Заполняем начальные условия
for (let i in date) {
  choise[i] = 0;
}
// Получаем элементы
const sel1 = document.getElementById('popup-date');
const sel2 = document.getElementById('popup-time');
// Рендерим даты
for (let i in date) {
  const l = document.createElement('option');
  l.value = i;
  l.innerHTML = date[i];
  sel1.appendChild(l);
}
// Рендерим время
for (let i in times) {
  const l = document.createElement('option');
  l.value = i;
  l.innerHTML = times[i];
  sel2.appendChild(l);
}
// Вешаем обработчики на select'ы
sel1.addEventListener('change', function(e) {
  // Сохраняем текущий индекс даты
  nowDate = e.target.value;
  // Меняем значение во времени
  sel2.value = choise[e.target.value];
});

sel2.addEventListener('change', function(e) {
  // Сохраняем значение времени для текущей даты
  choise[nowDate] = e.target.value;
});

Вот идея, как одно значение привязать к другому. Пробуйте, экспериментируйте!
Данному скрипту не важно, сколько у вас данных в первом и втором select, будет работать одинаково.

БЛОГ НА HUSL

JS как сделать привязку(прослушку) между двумя блоками "select"

Ответы (1 шт):