JS при выборе через SELECT

@arava · Регистрация: 30.06.2014

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

Приветствую . Понимаю что тема скорее всего популярная но ввиду отсутствия знаний по JS обращаюсь на форум . Я работаю с PHP , и получил задание :

Есть два SELECT , один отвечает за "тип" а другой за "вид" .Нужно чтобы при выборе селекта "тип" у "вид" подгружались только <option> с видом относящемся в типу . Примеров много но ввиду отсутствия времени нету возможности разобраться, обратился сюда . Сайт по паттерну MVC , привожу код view :

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
<form method="POST" action="/warehouse/save/">
    <table class="table table-hover">
        <tr>
            <td>Тип кабеля</td>
            <td></td>
            <td>
                <select name="type_of_cable" style="width: 100px">
                    <option></option>
                    <option>type 8</option>
                    <option>type 0</option>
                    <option>type p</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                Вид кабеля
            </td>
            <td></td>
            <td>
                <select name="kind_of_cable"  style="width: 100px">
                    <option>ground</option>
                    <option>ftth</option>
                    <option>air</option>
                    <option></option>
                    <option></option>
                    <option></option>
                    <option></option>
                    <option></option>
                </select>
            </td>
        </tr>
</table>
</form>

При выборе type_8 в селекте должно появится только <option>air</option>

@sad67man · 03.02.2017, 11:54

arava, А при отсутствии выбора что должно быть?

@arava · 03.02.2017, 12:01 **[ТС]**

sad67man, если тип не выбран то у виде будет пусто

@sad67man · 03.02.2017, 12:05

arava, Можно как вариант создать несколько селектов, и переключать их в зависимости от выбранного типа.

@arava · 03.02.2017, 12:09 **[ТС]**

sad67man, подходит. Как реализовать на js ?

@sad67man · 03.02.2017, 12:54

arava, Вот такая идея у меня возникла https://jsfiddle.net/6sowwf8j/

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
<table class="table table-hover">
  <tr>
    <td>Тип кабеля</td>
    <td></td>
    <td>
      <select id='type_of_cable' name="type_of_cable" style="width: 100px">
        <option></option>
        <option value='8'>type 8</option>
        <option value='0'>type 0</option>
        <option value='p'>type p</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      Вид кабеля
    </td>
    <td></td>
    <td>
      <select name="kind_of_cable[8]" id='kind_of_cable_8' class='kind_of_cable' style="width: 100px" hidden>
        <option value='81'>type 81</option>
        <option value='82'>type 82</option>
        <option value='83'>type 83</option>
      </select>
      <select name="kind_of_cable[0]" id='kind_of_cable_0' class='kind_of_cable' style="width: 100px" hidden>
        <option value='01'>type 01</option>
        <option value='02'>type 02</option>
        <option value='03'>type 03</option>
      </select>
      <select name="kind_of_cable[p]" id='kind_of_cable_p' class='kind_of_cable' style="width: 100px" hidden>
        <option value='p1'>type p1</option>
        <option value='p2'>type p2</option>
        <option value='p3'>type p3</option>
      </select>
    </td>
  </tr>
</table>

JavaScript
1
2
3
4
$('#type_of_cable').change(function() {
  $('.kind_of_cable').prop('hidden', true);
  $('#kind_of_cable_' + this.value).prop('hidden', false);
})

Добавлено через 1 минуту

PHP
1
$kindOfCable = $_POST['kind_of_cable'][$_POST['type_of_cable']];

Добавлено через 8 минут
arava, Это я на jquery написал, вам нужно на чистом javascript-е?

@arava · 03.02.2017, 14:10 **[ТС]**

sad67man, если не сложно для Вас, дайте пожалуйста вариант на чистом JS . Во всяком случае пока что буду разбираться в чистом JS без сторонних библиотек . Заранее спасибо

@sad67man · 03.02.2017, 14:52

arava,

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
(function() {
  var selTypes = document.getElementById('type_of_cable');
  var kindCollection = document.querySelectorAll('.kind_of_cable');
  selTypes.onchange = function() {
    for (var i = 0; i < kindCollection.length; i++) {
      kindCollection[i].hidden = true;
    }
    var current = document.getElementById('kind_of_cable_' + this.value);
    if (current) {
      current.hidden = false;
    }
  }
})()

@arava · 03.02.2017, 23:17 **[ТС]**

sad67man, Спасибо Вам, буду разбирать

Добавлено через 7 часов 44 минуты
sad67man, с кодом JS разобрался но столкнулся со следующей проблемой :

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
 <tr>
            <td>Тип кабеля</td>
            <td></td>
            <td>
                <select id='type_of_cable' name="type_of_cable" style="width: 100px" onchange="onSelect()">
                    <option></option>
                    <option value='8'>type 8</option>
                    <option value='0'>type 0</option>
                    <option value='p'>type p</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                Вид кабеля
            </td>
            <td></td>
            <td>
                <select name="kind_of_cable" id='kind_of_cable_8' class='kind_of_cable' style="width: 100px" hidden>
                    <option value='rope'>с тросом</option>
                    <option value='armored_rope'>бронированный с тросом</option>
                    <option value='dielectric'>диелекрик</option>
                    <option value='ftth'>ftth</option>
                </select>
                <select name="kind_of_cable" id='kind_of_cable_0' class='kind_of_cable' style="width: 100px" hidden>
                    <option value='ground'>канализация</option>
                    <option value='ecolight'>еколайт</option>
                </select>
                <select name="kind_of_cable" id='kind_of_cable_p' class='kind_of_cable' style="width: 100px" hidden>
                    <option value='ecolight_last'>еколайт</option>
                </select>
            </td>
        </tr>

мне нужно принимать значение

HTML5
1
<select name="kind_of_cable">

для внесения в БД,в Вашем примере они все разные:

HTML5
1
2
3
name="kind_of_cable8"
name="kind_of_cable0"
name="kind_of_cablep"

А если использовать

HTML5
1
 name="kind_of_cable"

то в переменную попадает последний елемент

HTML5
1
<option value='ecolight_last'>еколайт</option>

Будут идеи?

Это приводит в заблуждение.

@sad67man · 04.02.2017, 00:30

arava, Даже если селекты скрытые, то они все равно отправляются. Сама задумка заключалась в следующем, что мы указываем имена именно в таком виде

HTML5
1
2
3
name="kind_of_cable[8]"
name="kind_of_cable[0]"
name="kind_of_cable[p]"

Квадратные скобки важны! Таким образом данные отправятся в виде массива. Ключом будет являться значение type_of_cable. Если вы посмотрите я привел пример php кода

PHP
1
$kindOfCable = $_POST['kind_of_cable'][$_POST['type_of_cable']];

Добавлено через 9 минут
Я все протестил, прежде чем выкладывать код. Будьте внимательнее)

Добавлено через 14 минут
Естественно, если указать одинаковые имена, то возникнет конфликт, и отправится значение только последнего селекта.
Но даже если отправить в таком виде

HTML5
1
2
3
name="kind_of_cable8"
name="kind_of_cable0"
name="kind_of_cablep"

То и в этом случае не составит труда достать выбранное значение через конкатенацию значения type_of_cable.

@arava · 04.02.2017, 01:17 **[ТС]**

sad67man, Не обратил внимания) спасибо

Последнее в чем попрошу пояснения :
Почему-то js при выборе селекта type_of_cable не срабатывает с первого раза. Т.е. выбираю type8 а вид не появляется, жму type0 - не появляется, жму снова type8 и все запускается, дальше все норм. С чем связано такое поведение?

@sad67man · 04.02.2017, 01:48

arava, Знаете, так сразу на ум и не приходит, в чем может быть проблема. Такого быть не должно. Нужно дебажить код. Построчно проверяйте как исполняется код. Выводите что-нибудь в консоль, либо делайте точки остановки. И смотрите, что именно идет не так.

@kalabuni · 04.02.2017, 05:17

arava, читаем

@arava · 06.02.2017, 21:58 **[ТС]**

kalabuni, не помогло. Идея такова: пока не выбран первый селект, другой селект находится в hidden .sad67man, выдал код и все работает. Но проблема в том что : загрузил страницу, выбираю любой из трех option`ов селекта, другой селект не появляется. Выбираю в селекте еще раз любой из option`ов, нижний селект появляется. Перечитал разных топиков, не могу разобраться...
Кстати, если при загрузке страницы клацать первый option верхнего селекта, нижний не появляется тоже.

Код привожу :

HTML5
1
2
3
4
5
6
7
  
<select onchange="onSelectCable()" id="type_of_cable" name="type_of_cable" style="width: 100px">
                    <option></option>
                    <option value="8">type 8</option>
                    <option value="0">type 0</option>
                    <option value="p">type p</option>
</select>

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
 <select name="kind_of_cable[8]" id='kind_of_cable_8' class='kind_of_cable' style="width: 100px" hidden>
                    <option value='rope'>с тросом</option>
                    <option value='armored_rope'>бронированный с тросом</option>
                    <option value='dielectric'>диелекрик</option>
                    <option value='ftth'>ftth</option>
                </select>
                <select name="kind_of_cable[0]" id='kind_of_cable_0' class='kind_of_cable'  style="width: 100px" hidden>
                    <option value='ground'>канализация</option>
                    <option value='ecolight'>еколайт</option>
                </select>
                <select name="kind_of_cable[p]" id='kind_of_cable_p' class='kind_of_cable' style="width: 100px" hidden>
                    <option value='ecolight'>еколайт</option>
                </select>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function onSelectCable() {
 
    var selTypes = document.getElementById('type_of_cable');
 
    var kindCollection = document.querySelectorAll('.kind_of_cable');
    selTypes.onchange = function() {
        for (var i = 0; i < kindCollection.length; i++) {
            kindCollection[i].hidden = true;
        }
        var current = document.getElementById('kind_of_cable_' + this.value);
        if (current) {
            current.hidden = false;
        }
    }
}

@sad67man · 06.02.2017, 22:12

arava, Потому что вы мой код обернули функцию и повесили на onchange. Этого делать не надо было. У меня в коде как раз таки навешивается обработчик onchange. Просто разместите скрипт или подключите его в конце страницы.

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
27
28
29
30
31
32
33
34
<select id="type_of_cable" name="type_of_cable" style="width: 100px">
  <option></option>
  <option value="8">type 8</option>
  <option value="0">type 0</option>
  <option value="p">type p</option>
</select>
<select name="kind_of_cable[8]" id='kind_of_cable_8' class='kind_of_cable' style="width: 100px" hidden>
  <option value='rope'>с тросом</option>
  <option value='armored_rope'>бронированный с тросом</option>
  <option value='dielectric'>диелекрик</option>
  <option value='ftth'>ftth</option>
</select>
<select name="kind_of_cable[0]" id='kind_of_cable_0' class='kind_of_cable' style="width: 100px" hidden>
  <option value='ground'>канализация</option>
  <option value='ecolight'>еколайт</option>
</select>
<select name="kind_of_cable[p]" id='kind_of_cable_p' class='kind_of_cable' style="width: 100px" hidden>
  <option value='ecolight'>еколайт</option>
</select>
<script>
(function(){
  var selTypes = document.getElementById('type_of_cable');
  var kindCollection = document.querySelectorAll('.kind_of_cable');
  selTypes.onchange = function() {
    for (var i = 0; i < kindCollection.length; i++) {
      kindCollection[i].hidden = true;
    }
    var current = document.getElementById('kind_of_cable_' + this.value);
    if (current) {
      current.hidden = false;
    }
  }
})()
</script>

@arava · 06.02.2017, 22:18 **[ТС]**

sad67man, жесть) выходные лопатил... А что меняет навешивание функции? мне бы вынести js в отдельную директорию и потом подключать

@sad67man · 06.02.2017, 22:31

Либо тогда уже так

HTML5
1
2
3
4
5
6
<select onchange="onSelectCable(this)" id="type_of_cable" name="type_of_cable" style="width: 100px">
  <option></option>
  <option value="8">type 8</option>
  <option value="0">type 0</option>
  <option value="p">type p</option>
</select>

JavaScript
1
2
3
4
5
6
7
8
9
10
function onSelectCable(select) {
  var kindCollection = document.querySelectorAll('.kind_of_cable');
  for (var i = 0; i < kindCollection.length; i++) {
    kindCollection[i].hidden = true;
  }
  var current = document.getElementById('kind_of_cable_' + select.value);
  if (current) {
    current.hidden = false;
  }
}

Добавлено через 4 минуты
arava, Потому что у меня в скипте как раз таки навешивается функция. Обратите внимание.

JavaScript
1
selTypes.onchange = function() {

Этот скрипт нужно вызвать один раз. А у вас получается что при каждом изменении селекта навешивается функция. Первый раз она не срабатывает, просто навешивается.

Добавлено через 5 минут
При последующих изменений селекта, событие onchange переписывается.

@arava · 06.02.2017, 22:34 **[ТС]**

sad67man, огромное спасибо за помощь, задача решена...

Новые блоги и статьи Все статьи Все блоги /
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 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,823
	03.02.2017, 11:54
	arava, А при отсутствии выбора что должно быть? 0

@arava 340 / 135 / 70 Регистрация: 30.06.2014 Сообщений: 717
	03.02.2017, 12:01 [ТС]
	sad67man, если тип не выбран то у виде будет пусто 0

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,823
	03.02.2017, 12:05
	arava, Можно как вариант создать несколько селектов, и переключать их в зависимости от выбранного типа. 0

@arava 340 / 135 / 70 Регистрация: 30.06.2014 Сообщений: 717
	03.02.2017, 12:09 [ТС]
	sad67man, подходит. Как реализовать на js ? 0

@arava 340 / 135 / 70 Регистрация: 30.06.2014 Сообщений: 717
	03.02.2017, 14:10 [ТС]
	sad67man, если не сложно для Вас, дайте пожалуйста вариант на чистом JS . Во всяком случае пока что буду разбираться в чистом JS без сторонних библиотек . Заранее спасибо 0

@arava 340 / 135 / 70 Регистрация: 30.06.2014 Сообщений: 717
	04.02.2017, 01:17 [ТС]
	sad67man, Не обратил внимания) спасибо Последнее в чем попрошу пояснения : Почему-то js при выборе селекта type_of_cable не срабатывает с первого раза. Т.е. выбираю type8 а вид не появляется, жму type0 - не появляется, жму снова type8 и все запускается, дальше все норм. С чем связано такое поведение? 0

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,823
	04.02.2017, 01:48
	arava, Знаете, так сразу на ум и не приходит, в чем может быть проблема. Такого быть не должно. Нужно дебажить код. Построчно проверяйте как исполняется код. Выводите что-нибудь в консоль, либо делайте точки остановки. И смотрите, что именно идет не так. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	04.02.2017, 05:17
	arava, читаем 0

@arava 340 / 135 / 70 Регистрация: 30.06.2014 Сообщений: 717
	06.02.2017, 22:18 [ТС]
	sad67man, жесть) выходные лопатил... А что меняет навешивание функции? мне бы вынести js в отдельную директорию и потом подключать 0

@arava 340 / 135 / 70 Регистрация: 30.06.2014 Сообщений: 717
	06.02.2017, 22:34 [ТС]
	sad67man, огромное спасибо за помощь, задача решена... 0

JS при выборе через SELECT

Решение