Связанные 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;
    }
}

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

Новые блоги и статьи Все статьи Все блоги /
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .