Laravel/Javascript:在选择不同的选择/下拉列表后填充选择/下拉列表


Laravel/Javascript: populate a select/dropdown after a different select/dropdown is selected

>我正在寻找一种解决方案,以便在从另一个下拉列表中选择一个选项(例如下拉列表 1(时填充下拉列表/选择(例如称为下拉列表 2(。

例如,从下拉菜单 1 中选择丰田,然后用丰田的车型填充下拉菜单 2,例如卡罗拉、凯美瑞等。或者另一个例子 - 在一个下拉列表中选择一个国家/地区将在另一个下拉列表中填充该国家/地区的不同城市。

我使用 laravel

作为我的框架,所以重要的是我的解决方案 (a( 在 laravel 中工作,(b( 从 mysql 数据库中获取结果,而不仅仅是硬编码的值数组。

我试图在这里实现这篇文章中的解决方案:http://forums.laravel.io/viewtopic.php?pid=40028

但它在我的设置中不起作用。这是我所拥有的:

我的观点如下所示:

{{ Form::open() }}
    <select id="make" name="make">
        <option>Select Car Make</option>
        <option value="1">Toyota</option>
        <option value="2">Honda</option>
        <option value="3">Mercedes</option>
    </select>
    <br>
    <select id="model" name="model">
        <option>Please choose car make first</option>
    </select>
{{ Form::close();}}

然后我的路线.php看起来像这样:

Route::get('api/dropdown', function(){
    $input = Input::get('option');
    $maker = Client::find($input);
    $models = $maker->projects();
    return Response::eloquent($models->get(array('id','name')));
});

最后,我的脚本如下所示:

jQuery(document).ready(function($){
$('#make').change(function(){
        $.get("{{ url('api/dropdown')}}", 
            { option: $(this).val() }, 
            function(data) {
                var model = $('#model');
                model.empty();
                $.each(data, function(index, element) {
                    model.append("<option value='"+ element.id +"'>" + element.name + "</option>");
                });
            });
    });
});

我目前在控制台中收到一个 javascript 错误:

Failed to load resource: the server responded with a status of 500 (Internal Server Error): http://localhost/test-project/api/dropdown?option=1
Failed to load resource: the server responded with a status of 500 (Internal Server Error): http://localhost/test-project/%7B%7B%20url('api/dropdown')%7D%7D?option=1

我相信我有 CSRF 代币,这显然可能会影响事情 - 但我真的不确定如何使用它们,所以只是告诉我修复它无济于事,我真的需要一点细节关于如何解决这个问题(如果你认为这是问题所在(。

或者,也许修改后或更好的解决方案会更好?我相信有很多更好的方法来实施这种类型的解决方案。

总之,我的问题是:如何修复上面的代码以使其正常工作,或者在另一个下拉列表中选择一个选项后填充下拉列表的替代或更好方法是什么?

我已经倾倒了数百种解决方案,但似乎没有一种对我和我的拉拉维尔有用!

编辑:

完整路线如下所示:

Route::resource('clients', 'ClientsController');
Route::resource('tasks', 'TasksController');
Route::controller('rates', 'RatesController');
Route::controller('projects', 'ProjectsController');
Route::controller('users', 'UserManagementController');
Route::controller('/', 'UsersController');
Route::get('api/dropdown', function(){
    $input = Input::get('option');
    $maker = Client::find($input);
    $models = $maker->projects();
    return Response::eloquent($models->get(array('id','name')));
});

在Laravel中定义路线的顺序至关重要。有时你会挠头,想知道为什么你会得到一个HttpNotFoundException。考虑您的路由.php文件。

当你定义像Route::controller('/', 'UsersController');这样的路由时,用简单的语言来说,它的贪婪路由将不允许在此路由下定义的路由执行,因此当您定义这种类型的路由时,请确保它在最后

因此,请对您的路线进行一些更改,例如

Route::get('api/dropdown', function(){
$input = Input::get('option');
$maker = Client::find($input);
$models = $maker->projects();
return Response::eloquent($models->get(array('id','name')));
});
Route::controller('/', 'UsersController');

该教程是为Laravel 3编写的,因此有些东西会有所不同。 你可以说这是因为有些方法在snake_case而不是驼峰案例中。

return Response::json($models->select(array('id','name'))->get())

这应该返回一个可由Javascript使用的有效json响应。 但是,如果您遵循了该教程,则可能还需要对模型进行一些编辑。 belongs_to应该是belongsTo的,has_many应该是hasMany的。

路线进行一些更改,例如

Route::get('api/dropdown', function(){ 
$input = Request::get('option');(option input passing from jQuery)
$maker = Client::where('id', '=',$input);
  ('Client' is your models name ,it should be called in top of the web page 
  like this 'use App'Models'Designation;')
return Response::json($maker->get(array('id','name')));
   ('Id and name' are your listing values from table)
});

一个解决方案和简单的方法

 Route::get('api/dropdown', function(){ 
 $input = Request::get('option');
 return Response::json((Client::where('id', '=',$input))->get());
 });