Select, зависящий от Select

@Foys · Регистрация: 21.04.2016

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

Не совсем уверена, что пишу в нужном разделе.

В общем, у меня есть форма подбора характеристик датчика давления (см.картинку).
Сначала пользователь выбирает нужный тип давления - Абсолютное, Избыточное, и т.д. Только после этого появляется блок выбора единицы измерения - кПа или МПа. От этих двух параметров (тип и единица изм.) зависит верхний предел измерений (который появляется только после выбора предыдущих двух). Иными словами, если пользователь выбрал "Абсолютное" + "кПа", ему выдается один диапазон, если "Избыточное" + "МПа", то совсем другой. Вот это у меня и не получается сделать.

Пример для Абсолютного давления:

HTML5
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
42
43
44
 
<li class="row-fluid attributes_1">
<label class="span4 attributes_title"> <span class="attributes_name"><b>Тип измеряемого давления</b></span> </label>
<span class="span8" id="block_attr_sel_1">
<select name="jshop_attr_id[1]" size="1" class="inputbox" id="jshop_attr_id1" aria-required="true" onChange="Selected(this)" onChange="setAttrValue('1', this.value);setAttrDesc('1',this.value);">
  <option value="0">Выберите</option>
  <option value="1">Абсолютное</option>
  <option value="2">Избыточное</option>
  <option value="3">Разрежение</option>
  <option value="4">Давление-разрежение</option>
  <option value="5">Разность давлений</option>
</select> 
</span><br/></li>
<li class="row-fluid attributes_1">
<div id='Unit' style='display: none;'>
      <label class="span4 attributes_title"> <span class="attributes_name"><b>Единица измерения</b></span> </label>
      <span class="span8" id="block_attr_sel_2">
      <select name = "pascal" size="1" class="inputbox" id="jshop_attr_id2" aria-required="true" onChange="Selected1(this)">
       <option value="0">Выберите</option>
       <option value="1">кПа</option>
       <option value="2">МПа</option>
      </select> </span>
    <br/></div> </li>
<li class="row-fluid attributes_1">
<div id='AbsolutePressure1' style='display: none;'> <!--Диапазон для кПа-->
      <label class="span4 attributes_title"> <span class="attributes_name"><b>Верхний предел измерений</b></span> </label>
      <span class="span8" id="block_attr_sel_2">
      <select>
       <option value="0">Выберите</option>
       <option value="1">2,5</option>
       <option value="2">4,0</option>
       <option value="3">6,0 (6,3)</option>
       <option value="4">10,0</option>
      </select> </span>
    </div>
<div id='AbsolutePressure2' style='display: none;'>  <!--Диапазон для МПа-->
      <label class="span4 attributes_title"> <span class="attributes_name"><b>Верхний предел измерений</b></span> </label>
      <span class="span8" id="block_attr_sel_2">
      <select onChange="Selected1(that)">
       <option value="0">Выберите</option>
       <option value="1">0,25</option>
       <option value="2">0,4</option>
      </select> </span>  <br/>
    </div></li>

Для первого селекта я завела функцию Selected(a):

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
<script>
function Selected(a) {
        var label = a.value;
        if (label==1) {                    <!--Если выбрано Абсолютное давление-->
                        document.getElementById("Unit").style.display='block'; <!--Отображать Единицу измерения-->
            document.getElementById("AbsolutePressure1").style.display='none'; <!--Не отображать Абс.давление кПа-->
            document.getElementById("AbsolutePressure2").style.display='none'; <!--Не отображать Абс.давление МПа--> 
            document.getElementById("GaugePressure1").style.display='none'; <!--Не отображать Изб.давление кПа-->
            document.getElementById("GaugePressure2").style.display='none'; <!--Не отображать Изб.давление МПа-->
            
        } else if (label==2) { <!--Если выбрано Избыточное давление-->
            document.getElementById("Unit").style.display='block'; 
            document.getElementById("AbsolutePressure1").style.display='none';
            document.getElementById("AbsolutePressure2").style.display='none'; 
            document.getElementById("GaugePressure1").style.display='none';
            document.getElementById("GaugePressure2").style.display='none'; 
              
        } else if (label==0) { <!--Ничего не выбрано, то ничего не отображать-->
            document.getElementById("Unit").style.display='none';
            document.getElementById("AbsolutePressure1").style.display='none';
            document.getElementById("AbsolutePressure2").style.display='none';
            document.getElementById("GaugePressure1").style.display='none';
            document.getElementById("GaugePressure2").style.display='none'; 
            }        
} 
</script>

Для второго селекта - функцию Selected1(a):

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
function Selected1(a) {
        var label = a.value;
        if (label==1) {     <!--Если выбрано "кПа"-->
           document.getElementById("AbsolutePressure1").style.display='block'; <!--Отображать диапазон для кПа-->
           document.getElementById("AbsolutePressure2").style.display='none';  <!--Не отображать диапазон для МПа-->
                        
        } else if (label==2) {<!--Если выбрано "МПа"-->
        document.getElementById("AbsolutePressure1").style.display='none'; <!--Не отображать диапазон для кПа-->
    document.getElementById("AbsolutePressure2").style.display='block'; <!-- Отображать диапазон для МПа -->
                
                
        } else if (label==0) {
        document.getElementById("AbsolutePressure1").style.display='none';
    document.getElementById("AbsolutePressure2").style.display='none';
    document.getElementById("Unit").style.display='none';
        }
}
</script>

Подскажите, знающие люди, как изменить/дописать/добавить функцию, чтобы при выборе избыточного или другого давления мне снова выдавался список "кПа-МПа" и уже в зависимости от них новые диапазоны?

@mrtoxas · 01.09.2017, 11:15

Можно так попробовать. Держим всего три select'a и скрываем в них значения в зависимости от выбора предыдущего select'a.
https://codepen.io/anon/pen/yoZabd

HTML5
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 class="inputbox" id="jshop_attr_id1">
  <option disabled selected>Выберите</option>
  <option value="1">Абсолютное</option>
  <option value="2">Избыточное</option>
  <option value="3">Разрежение</option>
  <option value="4">Давление-разрежение</option>
  <option value="5">Разность давлений</option>
</select>
 
<select class="inputbox disabled" id="jshop_attr_id2">
  <option disabled selected>Выберите</option>
  <option value="1">кПа</option>
  <option value="2">МПа</option> 
</select>  
 
<select id="jshop_attr_value" class="disabled"> 
  <option disabled selected>Выберите</option>
  <option data-unit="kpa" value="1">2,5</option>
  <option data-unit="kpa" value="2">4,0</option>
  <option data-unit="kpa" value="3">6,0 (6,3)</option>
  <option data-unit="kpa" value="4">10,0</option>
  <option data-unit="mpa" value="1">0,25</option>
  <option data-unit="mpa" value="2">0,4</option>
  <option data-unit="mpa" value="3">0,6 (0,63)</option>
  <option data-unit="mpa" value="4">1,0</option>
</select>

CSS
1
2
3
4
5
6
7
8
9
10
.disabled{
  pointer-events:none;
  opacity: 0.5;
}
.kpa :not([data-unit="kpa"]){
  display: none;
}
.mpa :not([data-unit="mpa"]){
  display: none;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
$('#jshop_attr_id1').change(function(){
  $('#jshop_attr_id2').removeClass('disabled')
});
$('#jshop_attr_id2').change(function(){
  $('#jshop_attr_value').removeClass('disabled');
   if( $(this).val() == '1'){
      $('#jshop_attr_value').addClass('kpa');
      $('#jshop_attr_value').removeClass('mpa');
  } else{
      $('#jshop_attr_value').addClass('mpa');
      $('#jshop_attr_value').removeClass('kpa');
  }
})

Новые блоги и статьи Все статьи Все блоги /
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 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .