[英]Dynamic dropdowns using select2, json request and Laravel
I am trying to get dynamic drop downs working with Laravel and Select2. 我正在尝试使用Laravel和Select2进行动态下拉。 There are two drop downs;
有两个下降; one for companies ie "company2" and one for locations that belong to that company ie "location2".
一个用于公司,即“company2”,一个用于属于该公司的位置,即“location2”。
For the life of me, I cannot figure out how to make the "company2" drop down fire a event to read that companies locations, if it is changed! 对于我的生活,我无法弄清楚如何让“company2”下载一个事件来阅读那些公司的位置,如果它被改变了! What am I doing wrong in the javascript section of this code!
我在这段代码的javascript部分做错了什么! (everything else works)
(其他一切都有效)
Route 路线
Route::controller('api', 'ApiController');
Controller (ApiController) 控制器(ApiController)
public function getLocations($companyId)
{
return Location::where('company_id', $companyId)->lists('id', 'name');
}
Example output from address "api/locations/7" 地址“api / locations / 7”的示例输出
{"Yellowstone":"8"}
View (form open/close section omitted) 查看(表格打开/关闭部分省略)
{!! Form::select('company_id', $companies, null, ['class' => 'company2 form-control']) !!}
{!! Form::select('location_id', $locations, null, ['class' => 'location2 form-control']) !!}
View (Javascript) 查看(Javascript)
<script type="text/javascript">
$(document).ready(function() {
$(".company2").select2();
$(".location2").select2();
});
$(".company2").select2().on('change', function() {
var $company2 = $('.company2');
$.ajax({
url:"../api/locations/" + $company2.val(),
type:'GET',
success:function(data) {
var $location2 = $(".location2");
$location2.empty();
$.each(data, function(value, key) {
$location2.append($("<option></option>").attr("value", value).text(key));
});
$location2.select2();
}
});
}).trigger('change');
</script>
The view is passed a list of active companies when initialized ie 视图在初始化时传递给活动公司列表,即
$companies = Company::lists('trading_name', 'id');
Replace your javascript with the following, you may need to tweak some of it. 用以下内容替换您的javascript,您可能需要调整一些。 Please make sure you look through the comments.
请务必仔细阅读评论。
var $company2 = $('.company2');
var $location2 = $(".location2");
$company2.select2().on('change', function() {
$.ajax({
url:"../api/locations/" + $company2.val(), // if you say $(this) here it will refer to the ajax call not $('.company2')
type:'GET',
success:function(data) {
$location2.empty();
$.each(data, function(value, key) {
$location2.append($("<option></option>").attr("value", value).text(key)); // name refers to the objects value when you do you ->lists('name', 'id') in laravel
});
$location2.select2(); //reload the list and select the first option
}
});
}).trigger('change');
Change the following when you grab the location data from the controller 从控制器获取位置数据时更改以下内容
public function getLocations($companyId)
{
return Location::where('company_id', $companyId)->lists('name', 'id');
}
you can try this : 你可以试试这个:
$.getJSON("getOptions.php", function (json) {
$("#inputs").select2({
data: json,
width: "180px"
});
});
example json output : 示例json输出:
{id:0,text:"Text 1"},
{id:1,text:"Text 2"},
{id:2,text:"Text 3"},
{id:3,text:"Text 4"},
{id:4,text:"Text 5"}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.