Связанный список ajax

07.07.2017, 17:22. Просмотров 81. Ответов 0

нужны связанные списки. Если выбрана marka, то подгружаются данные в model,потом выбираем model и подгружаются тип запчасти. Нужны по максиму связанные селекты. Когда выбираешь только тип запчасти или наоборот, то подгружаются marka только те где есть такой тип запчасти.
index.php
PHP
1 2 3 4 5 6 7 8 связанный список ajax 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 ajax 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 <?php require_once __DIR__. '/sql.php'; $link = dbConnect(); $sqLmarka = "SELECT distinct marka FROM tablepart ORDER BY marka ASC"; $res = mysqli_query($link, $sqLmarka); echo mysqli_error($link); while ($row = mysqli_fetch_assoc($res)) { $marka[] = $row; } $sqLtype = "SELECT distinct type FROM tablepart ORDER BY type ASC"; $res2= mysqli_query($link, $sqLtype); echo mysqli_error($link); while ($row = mysqli_fetch_assoc($res2)) { $types[] = $row; }?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags must come first in the head; any other head content must come after these tags --> <title>ajaxSearch</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script type="text/javascript"> $(document).ready(function(){ $('#marka').on('change',function(){ var marka = $(this).val(); if(marka){ $.ajax({ type:'POST', url:'ajaxData.php', data:'marka='+marka, success:function(html){ $('#model').html(html); $('#type').html(html); } }); }else{ $('#model').html('<option value="">Select marka first</option>'); $('#type').html('<option value="">Select model first</option>'); } }); $('#model').on('change',function(){ var model = $(this).val(); if(model){ $.ajax({ type:'POST', url:'ajaxData.php', data:'model='+model, success:function(data){ $('#type').html(data); } }); } }); }); </script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <br><br> <div class="container" style="border: 2px solid #eee;padding: 30px 20px; border-radius: 30px"> <div class="row"> <div class="col-md-12 text-center"> <form action="" method="post" class="form-group-lg"> <div class="col-md-3"> <select name="marka" id="marka" class="form-control"> <option value="0">-- выберите марку --</option> <?php foreach ($marka as $v):?> <option value="<?=$v['marka']?>"><?=$v['marka']?></option> <?php endforeach?> <option value="0">-- выберите запчасть --</option> </select> </div> <div class="col-md-3"> <select name="model" id="model" class="form-control"> <option value="0">-- выберите модель --</option> </select> </div> <div class="col-md-3"> <select name="type" id="type" class="form-control"> <option value="0">-- название запчасти --</option> <?php if ($_POST['marka'] == 0):?> <?php foreach ($types as $type):?> <option value="<?=$type['type']?>"><?=$type['type']?></option> <?php endforeach?> <?php endif?> </select> </div> <div class="col-md-3"> <input type="text" class="form-control" name="article" placeholder="Артикул"> </div> <div class="col-md-3"></div> <div class="col-md-6" style="margin-top: 20px;"> <input type="submit" class="form-control btn btn-default btn-lg" name="send"> </div> <div class="col-md-3"></div> </form> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
в 'ajaxData.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 42 43 44 <?php require_once __DIR__. '/sql.php'; $link = dbConnect(); if (isset($_POST['marka']) &&!empty($_POST['marka'])) { $sqLmodel = "SELECT distinct model FROM tablepart WHERE marka = '". $_POST['marka']. "'"; $res = mysqli_query($link,$sqLmodel); if (mysqli_num_rows($res) > 0) { echo '<option value="">--выберите модель--</option>'; while ($row1 = mysqli_fetch_assoc($res)) { echo '<option value="'. $row1['model']. '">'. $row1['model']. '</option>'; } } else { echo '<option value="">-- не выбрана марка --</option>'; } $sqLtype = "SELECT type FROM tablepart WHERE model = '".$_POST['marka']."'"; $res2= mysqli_query($link,$sqLtype); if (mysqli_num_rows($res2) > 0) { echo '<option value="">--выберите запчасть--</option>'; while ($row2 = mysqli_fetch_assoc($res2)) { echo '<option value="'. $row2['type']. '">'. $row2['type']. '</option>'; } } } if (isset($_POST['model']) &&!empty($_POST['model'])) { $sqLtype = "SELECT distinct type FROM tablepart WHERE model = '".$_POST['model']."'"; $res = mysqli_query($link,$sqLtype); if (mysqli_num_rows($res) > 0) { echo '<option value="">--выберите запчасть--</option>'; while ($row3 = mysqli_fetch_assoc($res)) { echo '<option value="'. $row3['type']. '">'. $row3['type']. '</option>'; } } else { echo '<option value="">-- не выбрана запчасть --</option>'; } }?>
markamodelтип запчасти
Добавлено через 1 минуту
https://motorland.by/ вот тут что то похожее

Закрыть ... [X]

Связанные динамичные списки Select без перезагрузки страницы / Поделка детьми своими руками к новому году

Связанный список ajax Связанные списки с использованием Ajax и MySQL - Javascript-форум
Связанный список ajax Связанные списки select с получением данных по ajax
Связанный список ajax PHP. Связанные списки на PHP и AJAX с минимумом кода
Связанный список ajax Связанные списки Форум PHP Программистов
Связанный список ajax Форум вебмастеров / Связанные списки
Связанный список ajax Связанные списки на ajax - jQuery
KNPR.30919 Knit Pro Крючок для вязания с Ажурные многоугольные мотивы Безотрывное вязание Вязание крючком от Вязание крючком ковриков на пол - 11 вариантов (схемы, описание, мк) Вязание топа спицами для женщин схемы с описанием Портал рукоделия и моды Заговоры сибирской целительницы. Выпуск 02 Изонить схемы 8 марта для создании открытки Вышивка нитками Коллекция чертежей автомобилей