Ajax 2 зависимых select значения из Mysql
Необходимо сделать зависимый список Марка — Модель автомобилей, где оба значения OPTION берутся из Mysql базы данных 2 разных таблиц и подгружаются без перезагрузки страницы с помощью Ajax.
Проект использует ORM Red Bean PHP. https://redbeanphp.com/index.php
Важный момент: На любой странице (к примеру index.php, sell.php и других) должно работать 3 пары зависимых select’a с одинаковыми данными из 2-х таблиц. Марка и модель автомобилей.
То есть
10 строка страницы index.php: марка — модель
58 строка страницы index.php: марка - модель
987 строка страницы index.php: марка - модель
И все это на любой их страниц.
Таблица 1. mark
Содержит поля:
id (числа от 1 до 150)
mark (название марки на английском языке, например Audi)
Таблица 2. model
Содержит поля
id (числа от 1 до 1700) Идут по степени увеличения.
model (название модели на английском языке, например Q8)
mark_id (числа от 1 до 100 соответствующие id марки из таблицы mark) mark_id из таблицы model сопоставляется с id из таблицы mark и таким образом выводятся модели.
Данный код выводит все марки вместе с id.
<?php
$marks = R::getAll('SELECT id, mark FROM mark');
?>
<select class="select2" name="mark" id="mark" required>
<option value="" disabled selected>Select mark</option>
<?php if (isset($marks)): ?>
<?php foreach ($marks as $mark): ?>
<option value="<?=$mark['id']; ?>"><?=$mark['mark']; ?></option>
<?php endforeach; ?>
<?php endif; ?>
</select>
Здесь должны подгружаться модели вида id и model.
<option id="model" value=”Здесь было id модели цифра”>Cayenne(а здесь model, к примеру указанная)</option>
SCRIPT.
<script>
function getMark() {
var str='';
var val=document.getElementById('mark');
for (i=0;i< val.length;i++) {
if(val[i].selected){
str += val[i].value + ',';
}
}
var str=str.slice(0,str.length -1);
$.ajax({
type: "GET",
url: "mark-model.php",
data:'mark_id='+str,
success: function(data){
$("#model").html(data);
}
});
}
</script>
Файл mark-model.php отвечающий за выбор model в зависимости от выбранной mark.
if ($_GET['mark']) {
$model = R::findAll('model', 'ORDER BY model ASC WHERE `mark_id` = ?' . $_GET['mark']);
print json_encode($model);
}
// Хз как правильно прописать запрос и вывод.
Оба значения select постоянно видимы для пользователя и выпадающий список mark и выпадающий список model.
Нужен работающий скорректированный код, прошу помощи за хорошее репутационное вознаграждение в 350 баллов.
КОРРЕКТИРОВКИ
К чему мы приходим с пользователем @Егор Банин ,почти добрались до ответа.
Страница index.php
<?php
$marks = R::getAll('SELECT id, mark FROM mark');
?>
<select class="select2" name="mark" id="mark" required>
<option value="" disabled selected>Select mark</option>
<?php if (isset($marks)): ?>
<?php foreach ($marks as $mark): ?>
<option value="<?=$mark['id']; ?>"><?=$mark['mark']; ?></option>
<?php endforeach; ?>
<?php endif; ?>
</select>
// Здесь должны выводиться модели
<select name="model">
<?php foreach($models as $model): ?>
<option value="<?= $model->id ?>"><?= htmlspecialchars($model->model) ?></option>
<?php endforeach ?>
</select>
<div id="model"></div>
mark-model.php
<?php
if ($_GET['mark']) {
$models = R::findAll('model', 'mark_id = :mark_id order by model', [':mark_id' => (int)$_GET['mark']]);
print json_encode($model);
}
?>
AJAX
$.ajax({
type: "GET",
url: "mark-model.php",
data:'mark='+str,
success: function(data){
$("#model").html(data);
}
});
Ответы (1 шт):
Как я понял, вам надо сделать два select'а -- марка и модель. Значения select'а модели должны зависеть от выбранной марки. И вы хотите на каждое изменение значения select'а марки перестраивать select моделей, загружая подходящие модели.
- Как получить подходящие модели
Когда вы выбрали марку у вас есть её id. Модели, которые вам нужны все имеют mark_id равный этому id. Какой бы SQL-запрос вы написали, чтобы получить эти модели?
select *
from `models`
where `mark_id` = ?
order by `model`
Как это записать используя RedBeanPHP? Думаю как-то так:
$models = R::findAll('model', 'mark_id = :mark_id order by model', [':mark_id' => (int)$_GET['mark']]);
Строка 'mark_id = :mark_id order by model' -- это кусок SQL, который RedBeanPHP подставит в итоговый запрос. Поэтому order by должен быть в конце по правилам SQL-синтаксиса.
- Как вывести модели в виде options select'а?
Так же как и в случае с марками
<select name="model">
<?php foreach($models as $model): ?>
<option value="<?= $model->id ?>"><?= htmlspecialchars($model->model) ?></option>
<?php endforeach ?>
</select>
mark-model.php должен вернуть только <select name="model">...</select>. Полученный HTML можно вставить в документ целиком.
- Как вставить html-список в документ?
Нужно какое-то специальное место в документе, куда будет помещён загруженный список. Своего рода плэйсхолдер. У вас это <option id="model" ...> -- плохой выбор. Нельзя помещать select в option. Пусть лучше это будет <div id="model"></div>. Тогда ваш код, поместит загруженный select моделей в div.
$.ajax({
type: "GET",
url: "mark-model.php",
data:'mark='+str,
success: function(data){
$("#model").html(data);
}
});
Чтобы получить работающий скорректированный код, вам надо постараться изложить задачу более ясно и последовательно. Обратите внимание на точность и корректность формулировок. Например: "Необходимо сделать зависимый список ..., где оба значения OPTION ..." -- оба? У одного option одного списка может быть только одно значение. Или: "должно работать 3 пары зависимых select’a с одинаковыми данными из 2-х таблиц. Марка и модель автомобилей." 3 пары это 6 select'ов, а марка и модель автомобиля это только 2 select'а. Что же вам нужно? Списки должны дублироваться или это совсем другие списки? "И все это на любой их страниц." Чьих их?
Это не просто придирки. Как только вы сформулируете задачу чётко и ясно, вы сами увидите её решение. Работа программиста и заключается в том, чтобы понимать и правильно формулировать задачи. А записать ясную мысль с помощью кода -- дело техники.