Последовательные выпадающие списки c цепной связью PHP+MySQL

@Centrovoy · Регистрация: 04.02.2014

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

Пишу виджет для Wordpress.

Нужно сделать 3 выпадающих списка. (их я уже сделал)

Но сначала нужно выбрать в первом списке марку авто, после чего во втором должны появиться модели данной марки, после выбора которых в 3-м выпадающем списке появятся модификации.

PHP
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
echo "<form id='myform' method='get' action=''>
<select id='manuf' name='manuf'>
<option value=''>Выбрать...</option>";
                $query = mysql_query("SELECT id,brand FROM tof_manufacturers ORDER BY brand");
                $result = mysql_fetch_array($query);
 
                do
                {
                echo "<option value='".$result['id']."'>".$result['brand']."</option>";
                }
                while($result = mysql_fetch_array($query));
 
echo "</select><br><br>";
 
echo "<select id='model' name='model'>
<option value=''>Выбрать...</option>";
                $query1 = mysql_query("SELECT id,description FROM tof_models WHERE manufacturer_id=504");
                $result1 = mysql_fetch_array($query1);
 
                do
                {
                echo "<option value='".$result1['id']."'>".$result1['description']."</option>";
                }
                while($result1 = mysql_fetch_array($query1));
 
echo "</select><br><br>";
 
echo "<select id='god' name='god'>
<option value=''>Выбрать...</option>";
                $query1 = mysql_query("SELECT capacity,start_date,end_date FROM tof_types WHERE model_id=24 GROUP BY capacity,start_date,end_date");
                $result1 = mysql_fetch_array($query1);
 
                do
                {
                echo "<option value='".$result1['id']."'>".$result1['capacity']." (".$result1['start_date']."-".$result1['end_date'].")</option>";
                }
                while($result1 = mysql_fetch_array($query1));
 
echo "</select>";
 
echo "</form>";

Вместо 504 должна быть какае-то переменная, переданная из 1-го селекта после выбора.
Вместо 24 должна быть какае-то переменная, переданная из 2-го селекта после выбора.

Как эту задачу реализовать в одном файле?
Сайт: http://autotime.by/

С JS совсем не дружу...

@MarlboroRed · 04.02.2014, 01:00

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

С JS совсем не дружу...

Очень зря, тут нужен AJAX

@Centrovoy · 04.02.2014, 01:05 **[ТС]**

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

Очень зря, тут нужен AJAX

Я понимаю, но как-то не было необходимости в изучении...
А тут друг попросил сделать такую штуку

@MarlboroRed · 04.02.2014, 01:23

Centrovoy, ну логика приблизительно такая
С помощью JQuery отлавливаешь событие change селетекта.
Делаешь аякс запрос и посылаешь в нем id выбраного, выбираешь в php скриптом из таблицы все другое, что связано с этим id, удаляешь все опции в следующем селекте и записываешь полученое.

Как это реализовать поможет гугл. Объяснять долго, писать рабочий код уж темболее.

@Centrovoy · 04.02.2014, 01:27 **[ТС]**

MarlboroRed, можно пример как из JS передать переменную в PHP?
Дальше думаю дела попроще пойдут

@MarlboroRed · 04.02.2014, 01:42

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

можно пример как из JS передать переменную в PHP

прочитай эту статью. Там и примеры и разъяснения:
http://codething.ru/ajax.php

@Centrovoy · 08.02.2014, 19:17 **[ТС]**

Итак... 2-е суток и у меня уже есть некоторые знания по JS.
Уже почти всё работает, НО осталась проблема:
1-й селект выбрали -- появился второй с нужной выборкой из БД
2-й селект выбираем... и больше ничего не происходит... (должен появится 3-й селект)
Прозванивал алертом, но функция не вызывается.
Единственное до чего дошел, вроде как нельзя вызвать .change у уже сгенерированного select'а кодом jQuery.

Скрипт:

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
      <script type="text/javascript">
        $(document).ready(function()
    {
 
    
    $("#manuf").change(function()
                    {
                        var id_manuf = $(this).val();
 
                        
        if(!id_manuf){
                $('div[name="selectDataModel"]').html('');
                $('div[name="selectDataGod"]').html('');
                
        }else{
        
                $.ajax({
                        type: "POST",
                        url: "/action/ajax.base.php",
                        data: { action: 'showRegionForInsert', id_manuf: id_manuf },
                        cache: false,
                        success: function(responce){ $('div[name="selectDataModel"]').html(responce); }
                });
        };
id_manuf.trigger('change');
});
 
[b]ЭТА ФУНКЦИЯ НЕ ВЫЗЫВАЕТСЯ:[/b]
$("#model").change(function(){
alert ("привет2");
var id_model = $(this).val();
    
        $.ajax({
                type: "POST",
                url: "/action/ajax.base.php",
                data: { action: 'showCityForInsert', id_model: id_model },
                cache: false,
                success: function(responce){ $('div[name="selectDataGod"]').html(responce); }
        });
   });
});
    </script>

ajax.base.php:

PHP
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
<?php
 
ini_set(default_charset,"UTF-8");
 
switch ($_POST['action']){
                
 
                
        case "showCityForInsert":
                echo '<br>Модификация<br><select size="1" name="god">
                <option value="">Выберите модификацию...</option>';
                
                $query = mysql_query('SELECT capacity,start_date,end_date FROM tof_types WHERE model_id='.$_POST['id_model'].' GROUP BY capacity,start_date,end_date');
                $result = mysql_fetch_array($query);
 
                do
                {
                echo "<option value='".$result['id']."'>".$result['capacity']." (".$result['start_date']."-".$result['end_date'].")</option>";
                }
                while($result = mysql_fetch_array($query));
                
                echo '</select>';
                break;
 
        case "showRegionForInsert":
                echo '<br>Модель<br><select id="model" name="model"><option value="">Выбрать...</option>';
 
                $query = mysql_query('SELECT id,description FROM tof_models WHERE manufacturer_id='.$_POST['id_manuf']);
                $result = mysql_fetch_array($query);
                
                do
                {
                
                echo '<option value="'.$result['id'].'">'.$result['description'].'</option>';
                }
                while($result = mysql_fetch_array($query));
                echo '</select>';
                break;              
};
 
?>

Что в коде JS изменить, чтобы срабатывала функция:

JavaScript
1
$("#model").change(function()

учитывая что select с id="model" был сгенерирован jQuery.
Просмотреть что выдаёт сайт можно тут: http://autotime.by

@logini4 · 05.06.2017, 19:31

а в чем была проблема можно узнать?

@fanatikus · 05.06.2017, 19:40

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

$("#model").change(function()

JavaScript
1
$(document).on('change','#model',function(){})

Новые блоги и статьи Все статьи Все блоги /
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .

@MarlboroRed Марсианин 87 / 87 / 22 Регистрация: 11.10.2012 Сообщений: 333
	04.02.2014, 01:23
	Centrovoy, ну логика приблизительно такая С помощью JQuery отлавливаешь событие change селетекта. Делаешь аякс запрос и посылаешь в нем id выбраного, выбираешь в php скриптом из таблицы все другое, что связано с этим id, удаляешь все опции в следующем селекте и записываешь полученое. Как это реализовать поможет гугл. Объяснять долго, писать рабочий код уж темболее. 0

@Centrovoy 0 / 0 / 0 Регистрация: 04.02.2014 Сообщений: 4
	04.02.2014, 01:27 [ТС]
	MarlboroRed, можно пример как из JS передать переменную в PHP? Дальше думаю дела попроще пойдут 0

@logini4 0 / 0 / 0 Регистрация: 05.06.2017 Сообщений: 1
	05.06.2017, 19:31
	а в чем была проблема можно узнать? 0