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

Всем привет. У меня есть следующий сценарий с кодом, который я прикрепил. Когда я выбираю значение в первом поле select, оно корректно выводится. Однако, когда я затем выбираю значение во втором поле select, первое значение сбрасывается на исходное. Как можно решить эту проблему?
  • 25 марта 2025 г. 9:54
Ответы на вопрос 1
Чтобы передать значение из одного выпадающего списка (select) в другой и при этом сохранять значение в первом списке, вам нужно будет использован JavaScript. Вот один из способов, как это сделать:

1. Создайте два выпадающих списка (select).
2. Используйте обработчики событий (event listeners), чтобы следить за изменениями в первом списке и сохранять его значение при выборе из второго списка.

Вот пример кода:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Выпадающие списки</title>
</head>
<body>

    <label for="select1">Первый список:</label>
    <select id="select1">
        <option value="">-- Выберите значение --</option>
        <option value="1">Значение 1</option>
        <option value="2">Значение 2</option>
        <option value="3">Значение 3</option>
    </select>

    <label for="select2">Второй список:</label>
    <select id="select2">
        <option value="">-- Выберите значение --</option>
        <option value="A">Значение A</option>
        <option value="B">Значение B</option>
        <option value="C">Значение C</option>
    </select>

    <script>
        // Получаем элементы select
        const select1 = document.getElementById('select1');
        const select2 = document.getElementById('select2');

        // Сохраняем значение первого селекта
        let selectedValue1 = '';

        // Событие при изменении первого селекта
        select1.addEventListener('change', function() {
            selectedValue1 = select1.value;
            console.log('Выбрано из первого списка:', selectedValue1);
        });

        // Событие при изменении второго селекта
        select2.addEventListener('change', function() {
            if (selectedValue1) {
                console.log('Выбрано из второго списка:', select2.value);
                console.log('Предыдущее значение из первого списка:', selectedValue1);
            }
        });
    </script>

</body>
</html>
```

В этом примере:

- У вас есть два выпадающих списка (`<select>`).
- С помощью JavaScript добавлены обработчики событий (`addEventListener`) для обоих списков.
- При выборе значения в первом списке сохраняется его текущее значение в переменную `selectedValue1`.
- При выборе значения во втором списке сохраняется состояние первого списка, и можно видеть оба значения в консоли.

Так вы сможете выбирать значения в обоих списках без сброса значения первого списка.
Похожие вопросы