Значения одного select в зависимости от значения другого
Получается в первом селекте из таблицы бд выбирается некоторый тип (types).
Во втором селекте из другой таблицы нужно выводить все значения столбца product, которым соответствует выбранный тип из 1го селекта (во 2й таблице для каждого product прописан свой тип в отдельном столбце).
$(document).ready(function() {
$("select.SelectId").change(function() {
$.ajax({
url: "/zakaz/zayavka/products/" + $(this).children("option:selected").val(),
method: 'post',
data: {
value: $(this).children("option:selected").val()
}
}).done(function(data) {
$("select.newselect").html(data);
});
});
});
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<select class="SelectId">
<option selected disabled hidden>select some value</option>
<?php $sql = DB::select('select type from type');
foreach($sql as $row){?>
<option value="<?= $row->type?>">
<?= $row->type?>
</option>';
<?php } ?>
</select>
<select class="newselect">
<option selected disabled hidden>select new value</option>
</select>
Это файл newselect.blade.php.
<?php
$sql = DB::select('select product from meat where type = ?',[$type]);
foreach($sql as $row){
echo "<option value = '$row->product' > $row->product </option>";}
Роут
Route::post('/zakaz/zayavka/products/{type}', 'TypeController@getProducts');
Контроллер
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Auth;
class TypeController extends Controller
{
public function getProducts($type)
{
return view('newselect', [
'type' => $type,
]);
}
}
Что нужно пофиксить, чтобы заработало? Можно ли чтобы вообще было без отдельного этого файла newselect.blade.php, а то получается что это он и вообще не работает.
Ответы (1 шт):
Маршрут
Нужен GET. Во-первых, чисто по смыслу - идёт получение данных, а не отправка. Во-вторых, для работы POST нужно передавать csrf.
Route::get('/zakaz/zayavka/products/{type}', 'TypeController@getProducts');
Контроллер и шаблон
Они написаны "правильно". В том смысле, что код работает. Но, действительно правильно, было бы перенести всю логику из шаблона в контроллер. И возвращать данные, а не кусок html-кода.
Проверить работоспособность можно в браузере, введя указанный путь: http://test.local/zakaz/zayavka/products/type_1. Где type_1 - "идентификатор" типа (то есть, запрос select product from meat where type = "type_1" возвращает данные).
ajax
Тут тоже рабочий код. Только не забудьте post заменить на get.
$(document).ready(function() {
$("select.SelectId").change(function() {
$.ajax({
url: "/zakaz/zayavka/products/" + $(this).children("option:selected").val()
}).done(function(data) {
$("select.newselect").html(data);
});
});
});
Должно работать (проверил у себя).
Главное, чтобы запросы select product from meat where type = "type_1" возвращали данные. Если в табличке типов есть идентификаторы, то лучше использовать их.
То есть, здесь возможна "ошибка" и я бы немного переделал.
Табличка типов должна содержать два поля id и name. id - уникальный идентификатор. name - отображаемое название. Плюс, сколько угодно дополнительных полей.
Табличка товаров должна содержать три поля id, name, type_id. Поле type_id - должно ссылаться на id в первой табличке.
Тогда, первый селект будет формироваться так:
<select class="SelectId">
<option selected disabled hidden>select some value</option>
<?php $sql = DB::select('select id, name from type');
foreach($sql as $row){?>
<option value="<?= $row->id?>">
<?= $row->name?>
</option>';
<?php } ?>
</select>
А шаблон (newselect.blade.php) будет выглядеть так:
<?php
$sql = DB::select('select id, name from meat where type_id = ?',[$type]);
foreach($sql as $row){
echo "<option value = '$row->id' > $row->name </option>";}