Зависимый раскрывающийся список не работает для URL PATH в Ajax.
Обычный URL работает нормально для вызова Ajax, например. «http://localhost/ajax", но, например, при добавлении PATH к URL». http://localhost/ajax/drop" не работает.
Где я делаю не так?
Вид:
<html>
<head>
<link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ asset('js/app.js') }}"></script>
</head>
<body>
<div class="container">
<h2>Dependent Dropdown</h2>
<div class="form-group">
<label for="hardware">Select Hardware:</label>
<select name="hardware" class="form-control">
<option value="">Choose Any one</option>
@foreach ($hardwares as $key => $value)
<option value="{{ $key }}">{{ $value }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="component">Selected Component:</label>
<select name="component" class="form-control" disabled>
<option>Component</option>
</select>
</div>
</div>
<script>
jQuery(document).ready(function ()
{
jQuery('select[name="hardware"]').on('change',function(){
var hardwareID = jQuery(this).val();
if(hardwareID)
{
jQuery.ajax({
url : 'autoselect/component/' +hardwareID,
type : "GET",
dataType : "json",
success:function(data)
{
console.log(data);
jQuery('select[name="component"]').empty();
jQuery.each(data, function(key,value){
$('select[name="component"]').append('<option value="'+ key +'">'+ value +'</option>');
});
}
});
}
else
{
$('select[name="component"]').empty();
}
});
});
</script>
</body>
</html>
Контроллер:
namespace App\Http\Controllers;
use Illuminate\Support\Facades\DB;
class AjaxController extends Controller
{
public function hardware()
{
$hardwares = DB::table('hardwares')->pluck("name", "id");
return view('index', compact('hardwares'));
}
public function component($id)
{
$components = DB::table("components")->where("hardwares_id", $id)->pluck("name", "id");
return json_encode($component);
}
}
Маршрут:
Route::get('ajax', 'AjaxController@hardware'); //This is working.
Route::get('ajax/drop', 'AjaxController@hardware'); //This is not working.
Route::get('autoselect/component/{id}', 'AjaxController@component');
Создание зависимого раскрывающегося списка для оборудования с его компонентами.