Связанные select на javascript

@Illorion · Регистрация: 02.06.2019

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

Доброго времени суток! Я столкнулся с проблемой что мне нужно сделать зависимые списки и исходя из данных 2-ого select'а
написать условие для вывода результата,но у меня при написании условия у меня результат для варианта "межевание"
такой-же как и для варианта "Подготовка техплана"
Буду благодарен!!!

Вот код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
</script>
<select name="type" id="type">
  <option value="ptp" selected>Подготовка технического плана</option>
  <option value="mzh">Межевание</option>
  <option value="dpu">Дополнительные услуги</option>
  <option value="tps">Топографическая съёмка</option>
</select>
<select name="service" id="service" value="">
</select>
<DIV >Площадь (м.кв)</DIV>
<input type="number" value="" id="square">
 
<DIV >Кол-во помещений</DIV>
<input type="number" value="" id="object">
 
<button onclick="rez();"></button>
<DIV id="total"></DIV>

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<script type="text/javascript">
 
var services = {
        ptp:["Подготовка технического плана квартиры", "Подготовка технического плана нежилого помещения (части здания, части помещения)","Подготовка технического плана на несколько нежилых помещений, частей помещений, частей здания (офисные центры, торговые центры)","Подготовка технического плана ИЖС, дачного дома, гаража и т.д.","Подготовка технического плана нежилого здания","Подготовка технического плана линейного сооружения или Карты (плана) на зону с особыми условиями использования", "Подготовка технического плана многоквартирного дома","Выполнение запроса о предоставлении разрешительных документов", " Подготовка акта обследования"],
        mzh:["Подготовка межевого плана","Согласование границ","Подготовка межевого плана при*разделе участка","Подготовка межевого плана при*объединении участков","формирование части участка", "Подготовка схемы границ на КПТ","Вынос точек в натуру"],
        dpu:["получение выписки ЕГРН", "Подача документов для государственного кадастрового учёта и (или) государственной регистрации прав","Утверждение схемы границ на КПТ в  ДГИ г. Москвы."],
        tps:["Топографическая съёмка в Москве","Топографическая съёмка в Московской области","Согласование топографической съёмки в эксплуатирующих организациях","Подготовка ситуационного плана в масштабе 1:2000-1:10000"]
};
 
 
 
var type = document.getElementById("type");
var service = document.querySelector("#service");
window.onload = selectType;
type.onchange = selectType;
 
function selectType(ev){
  service.innerHTML = "";
  var c = this.value || "ptp", o;
  for(let i = 0; i < services[c].length; i++){
    o = new Option(services[c][i],i,false,false);
    service.add(o);
  };
}
 
 
 
function rez(){
    service1 = document.getElementById("service").value;
    square =  document.getElementById("square").value;
    square = parseInt(square);
    let cost = 0;
    if (service1 ==[0][0] && square<=100){
        cost=15000;
    }
    else if (service1 ==[0][0] && square>100){
        cost=(square-100)*50+9000;
    }
 
    else if (service1 ==[0] [1] && square<=200){
        cost=20000;
    }
    else if (service1 ==[0] [1] && square>200 && square<=500){
        cost=(square-200)*50+20000;
    }
 
    else if (service1 ==[0] [1] && square>500 && square<=1000){
        cost=(square-500)*40+35000;
    }
 
    else if (service1 ==[0] [1] && square>1000){
        cost=(square-1000)*30+55000;
    }
 
    else if (service1 ==[0] [2] && object<=10){
        cost=object*6000;
    }
 
    else if (service1 ==[0] [2] && object>10 && object<=50){
        cost=(object)-10*5000+60000;
    }
 
    else if (service1 ==[0] [2] && object>50){
        cost=(object)-50*3000+260000;
    }
 
 
    else if (service1 == [0] [1] && square<200){
        cost=25000;
    }
     
    document.getElementById('total').innerHTML = "Стоимость равна:"+cost+"p.";
}
 
</script>

@atanov · 16.09.2019, 11:05

Illorion, я же Вам ещё Массивы в javascript писал, что нужно причесать Ваш код.
Вы хотите сделать так, чтобы в зависимости от выбора в 1-м селекте появлялся 2-й селект? Проще всего прятать селекты и показывать тот, который нужен. Например в лоб так:

CSS
1
2
3
4
5
#selectFirst,
#selectSecond
{
    display: none;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link href="243.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <select id = "mainSelect">
            <option></option>
            <option>опция 1</option>
            <option>опция 2</option>
        </select>
        <select id = "selectFirst">
            <option>первый бла-бла-бла</option>
            <option>первый бла-бла-бла</option>
        </select>
        <select id = "selectSecond">
            <option>второй бла-бла-бла</option>
            <option>второй бла-бла-бла</option>
        </select>
    </body>
</html>
<script src = "243.js"></script>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
document.addEventListener("DOMContentLoaded", docReady);
function docReady()
{
    document.getElementById('mainSelect').addEventListener('change', showSelect);
}
function showSelect(e)
{
    switch(e.target.value)
    {
        case 'опция 1': 
            document.getElementById('selectFirst').style.display = 'block';
            document.getElementById('selectSecond').style.display = 'none';
        break;
        case 'опция 2': 
            document.getElementById('selectFirst').style.display = 'none';
            document.getElementById('selectSecond').style.display = 'block';
        break;
        default:
            document.getElementById('selectFirst').style.display = 'none';
            document.getElementById('selectSecond').style.display = 'none';
        break;
    }
}

А обрабатывать - по изменениям выбранных селектов.

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом