Laravel/Javascript：在选择不同的选择/下拉列表后填充选择/下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17921563/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Laravel/Javascript: populate a select/dropdown after a different select/dropdown is selected
提问by Josh
I'm looking for a solution to populate a dropdown/select (e.g. called dropdown 2) upon selecting an option from another dropdown (e.g. dropdown 1).
我正在寻找一种解决方案来在从另一个下拉列表（例如下拉列表 1）中选择一个选项时填充下拉列表/选择（例如称为下拉列表 2）。
For example, selecting Toyota from dropdown 1 will then populate dropdown 2 with the models of a toyota e.g. Corolla, Camry etc. Or another example - picking a country in one dropdown will populate the different cities of that country in another dropdown.
例如，从下拉列表 1 中选择 Toyota 将在下拉列表 2 中填充丰田的模型，例如卡罗拉、凯美瑞等。或者另一个示例 - 在一个下拉列表中选择一个国家将在另一个下拉列表中填充该国家/地区的不同城市。
I'm using laravel as my framework, so it's important my solution (a) works within laravel and (b) grabs the results from a mysql database, not just a hardcoded array of values.
我使用 laravel 作为我的框架，所以我的解决方案 (a) 在 laravel 中工作很重要，并且 (b) 从 mysql 数据库中获取结果，而不仅仅是一个硬编码的值数组。
I have tried to implement a solution from this post here: http://forums.laravel.io/viewtopic.php?pid=40028
我试图从这篇文章中实现一个解决方案：http: //forums.laravel.io/viewtopic.php?pid=40028
But it's not working within my setup. This is what I have:
但它在我的设置中不起作用。这就是我所拥有的：
My view looks like this:
我的观点是这样的：
{{ 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();}}
Then my route.php looks like this:
然后我的 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')));
});
And finally, my script looks like this:
最后，我的脚本如下所示：
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>");
});
});
});
});
I'm currently getting a javascript error in my console:
我目前在控制台中收到一个 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
I believe I have CSRF tokens on, which apparently may affect things - but I'm really not sure how to work with them so just telling me to fix that wont help, I really need a slight bit of detail on exactly how to fix that (if you think that is the problem).
我相信我有 CSRF 令牌，这显然可能会影响事情 - 但我真的不确定如何使用它们所以只是告诉我解决这个问题无济于事，我真的需要一些关于如何解决这个问题的细节（如果您认为这是问题所在）。
Alternatively, perhaps a modified or better solution would work better? I'm sure there are many better ways to implement this type of solution.
或者，也许修改后或更好的解决方案会更好？我相信有很多更好的方法来实现这种类型的解决方案。
In summary, my question is: how can I fix my code above to work OR what is an alternate or better way to populate a dropdown list after an option is selected in another dropdown?
总之，我的问题是：如何修复上面的代码以使其正常工作，或者在另一个下拉列表中选择一个选项后填充下拉列表的替代或更好的方法是什么？
I have poured through what feels like hundreds of solutions but none seem to work for me and my laravel-ness!
我已经倾注了数百种解决方案，但似乎没有一个对我和我的 laravel 有用！
Edit:
编辑：
Complete route looks like this:
完整的路线如下所示：
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')));
});
采纳答案by Trying Tobemyself
The order in which routes are defined in Laravel is crucial. Sometimes you'll be scratching your head and wondering why in the world you're getting an HttpNotFoundException. Consider your routes.php file.
在 Laravel 中定义路由的顺序至关重要。有时您会摸不着头脑，想知道为什么会收到 HttpNotFoundException。考虑您的 routes.php 文件。
When you define route like Route::controller('/', 'UsersController');, in simple language its greedy route it will not allow routes defined below this route to execute, so when you define this type of route make sure its at the end
当你定义路由时Route::controller('/', 'UsersController');，用简单的语言来说，它的贪婪路由将不允许在这条路由下面定义的路由执行，所以当你定义这种类型的路由时，请确保它在最后
So make some change to your route like
所以对你的路线做一些改变，比如
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');
回答by user1669496
That tutorial was written for Laravel 3 so somethings will be different. You can tell this because some of the methods are in snake_case rather than camelCase.
该教程是为 Laravel 3 编写的，所以有些东西会有所不同。你可以这么说是因为一些方法是在snake_case 而不是camelCase 中。
return Response::json($models->select(array('id','name'))->get())
return Response::json($models->select(array('id','name'))->get())
That should return a valid json response usable by Javascript. However, you may need to do some edits on your models as well if you followed that tutorial. belongs_toshould be belongsToand has_manyshould be hasMany.
那应该返回一个可以被 Javascript 使用的有效 json 响应。但是，如果您遵循该教程，您可能还需要对模型进行一些编辑。 belongs_to应该belongsTo而且has_many应该是hasMany。
