Зависимые списки и комментарии к каждому пункту из списка

Question

Зависимые списки и комментарии к каждому пункту из списка

Рейтинг: 0Ответов: 1Опубликовано: 30.06.2023

Есть простой код, где при выборе элемента выпадающего списка создается комментарий , и в скрипте есть зависимые подсписки. Мне необходимо, что бы каждому элементу основного списка было по два комментария с выводом в разные места, и к зависимому списку который формирует JS тоже необходимо по два комментария и вывод в другие области. Если с основным списком еще более менее понятно, то вот с зависимым есть сложность, как ему задать разные комментарии для разных "Подэлементов".

<label for="list1">Список 1:</label>
<select id="list1" onchange="populateList2()">
  <option value="">--- Выберите ---</option>
  <option value="item1" data-comment="Комментарий к элементу 1">Элемент 1</option>
  <option value="item2" data-comment="Комментарий к элементу 2">Элемент 2</option>
  <option value="item3" data-comment="Комментарий к элементу 3">Элемент 3</option>
</select>

<label for="list2">Список 2:</label>
<select id="list2">
  <option value="">--- Выберите ---</option>
</select>

<p id="comment"></p>

Скрипт

const list1 = document.getElementById("list1");
const list2 = document.getElementById("list2");
const comment = document.getElementById("comment");

const list1Values = {
  item1: {options: ["Подэлемент 1.1", "Подэлемент 1.2", "Подэлемент 1.3"], comment: "Комментарий к элементу 1"},
  item2: {options: ["Подэлемент 2.1", "Подэлемент 2.2"], comment: "Комментарий к элементу 2"},
  item3: {options: ["Подэлемент 3.1", "Подэлемент 3.2", "Подэлемент 3.3", "Подэлемент 3.4"], comment: "Комментарий к элементу 3"}
};

function populateList2() {
  const selectedValue = list1.value;
  const optionHTML = list1Values[selectedValue].options.map(value => `<option value="${value}">${value}</option>`).join("");
  list2.innerHTML = `<option value="">--- Выберите ---</option>${optionHTML}`;
  comment.innerText = list1Values[selectedValue].comment;
}

populateList2();

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Как-то так:

//кладём все опции в объект

const allOptions = {
    item1: {
        title: "Элемент 1",
        comment: "Коммент 1",
        options: {
            subitem1: {
                title: "Зависимый 1",
                comment: "Коммент 1-1"
            },
            subitem2: {
                title: "Зависимый 2",
                comment: "Коммент 1-2"
            }
        }
    },
    item2: {
        title: "Элемент 2",
        comment: "2",
        options: {
            subitem3: {
                title: "Зависимый  3",
                comment: "Коммент 2-3"
            },
            subitem4: {
                title: "Зависимый  4",
                comment: "Коммент 2-4"
            }
        }
    }
};

const select1 = document.querySelector("#select1");
const select2 = document.querySelector("#select2");
const comment1 = document.querySelector("#comment1");
const comment2 = document.querySelector("#comment2");

//заполняем первый список
for (let option in allOptions) {
    select1.options.add(new Option(allOptions[option].title, option));
}

//при изменении первого списка
select1.addEventListener("change", (event) => {
    //чистим второй список
    select2.length = 1;
    select2.value = "";
    comment2.innerText = "";
  
    //заполняем второй список
    let subOptions = allOptions[event.target.value].options;
    for (let option in subOptions) {
        select2.options.add(new Option(subOptions[option].title, option));
    }

    comment1.innerText = allOptions[event.target.value].comment;
});

//при изменении второго списка
select2.addEventListener("change", (event) => {
    comment2.innerText = allOptions[select1.value].options[event.target.value].comment;
});

<select name="" id="select1">
    <option value="" disabled selected>Выберите что-нибудь...</option>
</select>

<p id="comment1"></p>

<select name="" id="select2">
    <option value="" disabled selected>Выберите еще что-нибудь...</option>
</select>

<p id="comment2"></p>

Зависимые списки и комментарии к каждому пункту из списка

Ответы