Мулти селект Dropdown. Как можно создать многослойный мулти селект?

Question

[akmalbozor1965]

У нас создан список опций. У каждой опций есть свой подопций. Как можно перейти на подопций, выбрать и выводить их значений? Пример: Это 1 - список опций номера зубов. 2 - список опций должен быть список диагностики каждого зуба.

<select id="multiple-select" multiple>                        
    <option value="1">Зуб1</option>
    <option value="2">Зуб2</option>
    <option value="3">Зуб3</option>
    <option value="4">Зуб4</option>
    <option value="5">Зуб5</option>
</select>

Это 2 - список имена диагностики например 1 - го зуба

<select id="multiple-select2" multiple>
    <option value="1">Пулпед</option>
    <option value="2">Кариес</option>
    <option value="3">Флюроз</option>
    <option value="4">Гиперестезия</option>
    <option value="5">Периодонтит</option>
</select>

Таким образом 32 зубов имеют свой список диагностики

Comments

[alekssamos]

Может лучше как-нибудь в виде таблицы с чекбоксами сделать? Как календари делают, с 1 до 31 и названия дней недели.

[Ankhena]

Вам же захочется это как-то красиво стилизовать, а значит, всё равно придется скрывать селекты.
Поэтому можно сразу делать обычные выпадашки с чекбоксами.
Только не забывайте скрывать чекбоксы доступно, а не через display none.

Answer 1

[Zeqbpes]

Для создания многоуровневого мультиселекта, где у каждой опции есть связанные подопции, можно использовать динамическое обновление списка с помощью JavaScript.

Пример реализации:

HTML

<select id="tooth-select" multiple>
    <option value="1">Зуб1</option>
    <option value="2">Зуб2</option>
    <option value="3">Зуб3</option>
    <option value="4">Зуб4</option>
</select>

<select id="diagnosis-select" multiple></select>

JavaScript

const diagnostics = {
        1: ["Кариес", "Пульпит"],
        2: ["Гиперестезия", "Флюороз"],
        3: ["Периодонтит"],
        4: ["Травма", "Киста"]
    };

    document.getElementById("tooth-select").addEventListener("change", function () {
        const selectedTooth = this.value;
        const diagnosisSelect = document.getElementById("diagnosis-select");

        diagnosisSelect.innerHTML = ""; // Очистка старых данных

        (diagnostics[selectedTooth] || []).forEach(diagnosis => {
            const option = document.createElement("option");
            option.value = diagnosis;
            option.textContent = diagnosis;
            diagnosisSelect.appendChild(option);
        });
    });

Как это работает:

1. В первом списке выбираются зубы.
   
2. Во втором списке автоматически обновляются диагнозы, связанные с выбранными зубами.