Последовательные выпадающие списки 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(){})

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 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 На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .

@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