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

Question

Ефим

html , javascript , css

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

Как можно перейти к подопциям в нашем списке, выбрать их и вывести их значения? Например, первая опция представляет собой список номеров зубов, а вторая — список диагнозов для каждого зуба. У нас есть список зубов: Зуб1, Зуб2, Зуб3, Зуб4, Зуб5 и так далее. Вторая опция включает названия диагнозов для первого зуба, таких как Пулпит, Кариес, Флюороз, Гиперестезия и Периодонтит. Таким образом, каждый из 32 зубов имеет свой собственный список диагнозов.

24 декабря 2024 г. 6:33

Ответы на вопрос 2

Похожие вопросы

Answer 1

Создание многоуровневого выпадающего списка с возможностью множественного выбора в веб-приложении можно реализовать с помощью HTML, CSS и JavaScript. Для примера я покажу, как это можно сделать с использованием HTML для структуры, CSS для оформления и JavaScript для логики работы.

### Структура HTML

Для начала создадим выпадающие списки для зубов и диагнозов:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Многоуровневый выпадающий список</title>
    <style>
        .hidden { display: none; }
    </style>
</head>
<body>
    <div>
        <label for="tooth-select">Выберите зуб:</label>
        <select id="tooth-select" multiple>
            <option value="tooth1">Зуб1</option>
            <option value="tooth2">Зуб2</option>
            <option value="tooth3">Зуб3</option>
            <option value="tooth4">Зуб4</option>
            <option value="tooth5">Зуб5</option>
        </select>
    </div>
    
    <div>
        <label for="diagnosis-select">Выберите диагноз:</label>
        <select id="diagnosis-select" multiple class="hidden">
            <option value="pulpitis">Пулпит</option>
            <option value="caries">Кариес</option>
            <option value="fluorosis">Флюороз</option>
            <option value="hypersensitivity">Гиперестезия</option>
            <option value="periodontitis">Периодонтит</option>
        </select>
    </div>
    
    <button id="submit-button">Отправить</button>

    <div id="result"></div>

    <script src="script.js"></script>
</body>
</html>
```

### Логика JavaScript

Теперь добавим логику для отображения диагнозов в зависимости от выбранного зуба и для обработки выбора:

```javascript
document.addEventListener("DOMContentLoaded", function() {
    const toothSelect = document.getElementById("tooth-select");
    const diagnosisSelect = document.getElementById("diagnosis-select");
    const submitButton = document.getElementById("submit-button");
    const resultDiv = document.getElementById("result");

    // Словарь для хранения диагнозов по зубам
    const toothDiagnoses = {
        'tooth1': ['Пулпит', 'Кариес'],
        'tooth2': ['Флюороз', 'Гиперестезия'],
        'tooth3': ['Периодонтит'],
        'tooth4': ['Кариес', 'Флюороз', 'Гиперестезия'],
        'tooth5': ['Пулпит', 'Периодонтит'],
    };

    toothSelect.addEventListener('change', function() {
        diagnosisSelect.innerHTML = ""; // Очистить предыдущие опции
        const selectedTooths = Array.from(toothSelect.selectedOptions).map(option => option.value);

        if (selectedTooths.length > 0) {
            diagnosisSelect.classList.remove("hidden");

            // Добавляем диагнозы для выбранных зубов
            const diagnosesToShow = new Set(); // Используем Set для уникальности
    
            selectedTooths.forEach(tooth => {
                const diagnoses = toothDiagnoses[tooth] || [];
                diagnoses.forEach(diagnosis => diagnosesToShow.add(diagnosis));
            });
    
            // Заполним список диагнозов
            diagnosesToShow.forEach(diagnosis => {
                const option = document.createElement('option');
                option.value = diagnosis;
                option.textContent = diagnosis;
                diagnosisSelect.appendChild(option);
            });
        } else {
            diagnosisSelect.classList.add("hidden");
        }
    });

    submitButton.addEventListener('click', function() {
        const selectedTooths = Array.from(toothSelect.selectedOptions).map(option => option.text);
        const selectedDiagnoses = Array.from(diagnosisSelect.selectedOptions).map(option => option.text);

        resultDiv.innerHTML = `
            <h3>Вы выбрали:</h3>
            <p>Зубы: ${selectedTooths.join(', ')}</p>
            <p>Диагнозы: ${selectedDiagnoses.join(', ')}</p>
        `;
    });
});
```

### Описание кода

1. **HTML**:

Answer 2

Для создания многоуровневого мультиселекта, где у каждой опции есть связанные подопции, можно использовать динамическое обновление списка с помощью 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);
        });
    });
 
 
 Как это работает: