Laravel/Javascript:在选择不同的选择/下拉菜单后填充选择/下拉菜单

vddsk6oq  于 2023-05-05  发布在  Java
关注(0)|答案(3)|浏览(197)

我正在寻找一个解决方案来填充一个下拉列表/选择(例如:被称为下拉2)在从另一个下拉列表(例如,下拉列表1)。
例如,从下拉列表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();}}

然后我的route.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令牌,这显然可能会影响事情-但我真的不知道如何与他们合作,所以只是告诉我解决这个问题不会有帮助,我真的需要一点细节,究竟如何解决这个问题(如果你认为这是问题)。
或者,也许修改或更好的解决方案会更好?我相信有很多更好的方法来实现这种类型的解决方案。

我的问题是:我怎样才能修复我的代码上面的工作或什么是一个替代或更好的方式来填充一个下拉列表后,一个选项是选择在另一个下拉列表?

我已经倾注了数百种解决方案,但似乎没有一种对我和我的laravel特性有效!

编辑:

完整的路由看起来像这样:

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')));
});
tyky79it

tyky79it1#

在Laravel中定义路由的顺序是至关重要的。有时候你会挠头,想知道为什么你会得到一个HttpNotFoundException。考虑您的routes.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');
dy2hfwbg

dy2hfwbg2#

这个教程是为Laravel 3编写的,所以有些事情会有所不同。你可以这样说,因为有些方法是在snake_case而不是camelCase中。
return Response::json($models->select(array('id','name'))->get())
这应该会返回一个JavaScript可用的有效JSON响应。但是,如果您遵循了该教程,则可能还需要对模型进行一些编辑。belongs_to应为belongsTohas_many应为hasMany

n9vozmp4

n9vozmp43#

对你的路线做一些改变

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());

 });

相关问题