Select и options

@lRedle · Регистрация: 15.03.2023

Студворк — интернет-сервис помощи студентам

Всем привет! Есть два select, как при выборе значения в одном select скрыть ненужные option во втором select?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<select name="ceh" id = "ceh">
                        <option value="ceh1">Цех №1</option>
                        <option value="ceh3">Цех №3</option>
                        <option value="ceh4">Цех №4</option>
                        <option value="ceh5">Цех №5</option>
                        <option value="ceh7">Цех №7</option>
                        <option value="ceh8">Цех №8</option>
                      </select>
 
 <select name="uch" id = "uch">
                        <option id = "uch1" value="uch1">Участок 1</option>
                        <option  id = "uch2" value="uch2">Участок 2</option>
                        <option id = "uch3" value="uch3">Участок 3</option>
                        <option id = "uch4" value="uch4">Участок 4</option>                   
                      </select>

Скажем, в select name = "ceh" выбираю option value = "ceh1", а в select name = "uch" option id = "uch3" и "uch4" становятся невидимыми.
Спасибо!

krvsa · 07.12.2023, 14:23

Сообщение от lRedle

в select name = "ceh" выбираю option value = "ceh1", а в select name = "uch" option id = "uch3" и "uch4" становятся невидимыми.

Как вариант...

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<select name="ceh" id = "ceh">
    <option value=""></option>
    <option value="ceh1">Цех №1</option>
    <option value="ceh3">Цех №3</option>
    <option value="ceh4">Цех №4</option>
    <option value="ceh5">Цех №5</option>
    <option value="ceh7">Цех №7</option>
    <option value="ceh8">Цех №8</option>
</select>
 
<select name="uch" id = "uch">
    <option value=""></option>
    <option id = "uch1" value="uch1">Участок 1</option>
    <option  id = "uch2" value="uch2">Участок 2</option>
    <option id = "uch3" value="uch3">Участок 3</option>
    <option id = "uch4" value="uch4">Участок 4</option>                   
</select>
 
 
<script>
ceh.addEventListener('change', e => {
    const v = e.target.value 
    if (v == 'ceh1') uch.querySelectorAll('#uch3, #uch4').forEach(o => o.hidden = true)
})
 
</script>

@lRedle · 07.12.2023, 23:49 **[ТС]**

А если скажем я хочу что бы при выборе v == 'ceh1' скрывались #uch3, #uch4', а при выборе v == 'ceh3' 'эти участки наоборот становились видны, а скрывались уже #uch1 и #uch2'. Пробую такой код, но он при выборе одного из ceh1 или ceh2 скрывает все #uch1, #uch2,#uch3,#uch4. Я как-то не так написал условие?

JavaScript
1
2
3
4
5
6
7
8
9
10
ceh.addEventListener('change', e => {
    const v = e.target.value 
    if  (v == 'ceh3') { 
        uch.querySelectorAll('#uch3, #uch4').forEach(o => o.hidden = true);
 } else if (v == 'ceh1') {
     uch.querySelectorAll('#uch1, #uch2').forEach(o => o.hidden = true) 
 } else {
    uch.querySelectorAll('#uch3, #uch4, #uch1, #uch2').forEach(o => o.hidden = false)           
    }
})

Добавлено через 20 минут
т.е., на сколько я понимаю проблему, при таком коде мы сначала выбираем ceh1, значение пишется в переменную v, потом выбираем ceh3 и это значение так же передаётся в v. В итоге мы в переменной v получаем два значения - выполняются все условия. Но как тогда обойти эту проблему?

@DrType · 07.12.2023, 23:58

For example

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const disabledOptions = {
    ceh1: ['uch3', 'uch4'],
    ceh3: ['uch1', 'uch2']
}
ceh.addEventListener('change', e => {
    const v = e.target.value
    const optionsToHide = disabledOptions[v] ?? []
    uch.querySelectorAll('option').forEach(option => {
        option.hidden = optionsToHide.includes(option.value)
    })
    if (optionsToHide.includes(uch.value)) {
        uch.value = null
    }
})

krvsa · 08.12.2023, 09:16

Сообщение от lRedle

т.е., на сколько я понимаю проблему, при таком коде мы сначала выбираем ceh1, значение пишется в переменную v, потом выбираем ceh3 и это значение так же передаётся в v. В итоге мы в переменной v получаем два значения - выполняются все условия.

Ты в корне не понимаешь "проблему".

В одной переменной не может быть одновременно больше одного значения.

Для понимания своего алгоритма ты его должен потестировать. Т.е. посмотреть чему, в тот или иной момент, равны ключевые переменные и по какому пути "пошел работать" твой алгоритм.
Т.е. "написать программу" это только начало обучения. Научиться ее тестировать - это уже "второй этап" в программировании.

@Именч · 09.12.2023, 18:00

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

JavaScript
1
2
3
4
5
6
7
8
9
10
const listWorkshops = [{
    "title": "Цех №1",
    "list": ["Участок 1", "Участок 2"]
}, {
    "title": "Цех №2",
    "list": ["Участок 3", "Участок 4"]
}, {
    "title": "Цех №3",
    "list": ["Участок 4", "Участок 5"]
}];

Далее, мы делаем вывод в такую вёрстку

HTML5
1
2
<select name="ceh" id = "ceh"></select>
<select name="uch" id = "uch"></select>

Таким способом

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// Создаём взаимосвязанный список 
const listWorkshops = [{
    "title": "Цех №1",
    "list": ["Участок 1", "Участок 2"]
}, {
    "title": "Цех №2",
    "list": ["Участок 3", "Участок 4", "Участок 5"]
}, {
    "title": "Цех №3",
    "list": ["Участок 6"]
}];
 
// Получаем элементы select
const cehSelect = document.getElementById("ceh");
const uchSelect = document.getElementById("uch");
 
// Заполняем select с цехами
listWorkshops.forEach(workshop => {
  const option = document.createElement("option");
  option.text = workshop.title;
  cehSelect.add(option);
});
 
// Обработчик события изменения значения select с цехами
cehSelect.addEventListener("change", () => {
  // Очищаем select с участками
  uchSelect.innerHTML = "";
  
  // Получаем выбранный цех
  const selectedWorkshop = listWorkshops.find(workshop => workshop.title === cehSelect.value);
 
  // Заполняем select с участками
  selectedWorkshop.list.forEach(uch => {
    const option = document.createElement("option");
    option.text = uch;
    uchSelect.add(option);
  });
});
 
// Вызываем событие изменения значения select с цехами для первоначальной загрузки участков
cehSelect.dispatchEvent(new Event("change"));

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

Опции темы

Select и options

Решение