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

时间:2013-07-29 10:23:46

标签: php javascript jquery laravel laravel-4

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

然后我的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-ness有效!

修改:

完整路线如下:

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

2 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:1)

该教程是为Laravel 3编写的,因此有些不同。你可以这么说,因为有些方法是使用snake_case而不是camelCase。

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

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