使用 select2、json 请求和 Laravel 的动态下拉菜单

Question

我正在尝试使用 Laravel 和 Select2 获得动态下拉菜单。有两个下拉菜单；一种用于公司，即 "company2"，另一种用于属于该公司的地点，即 "location2".

对于我的生活，我无法弄清楚如何让 "company2" 下拉触发一个事件来读取公司的位置，如果它被更改的话！我在这段代码的 javascript 部分做错了什么！（其他一切正常）

路线

Route::controller('api', 'ApiController');

控制器（ApiController）

public function getLocations($companyId)
{
    return Location::where('company_id', $companyId)->lists('id', 'name');
}

地址 "api/locations/7"

的示例输出

{"Yellowstone":"8"}

视图（表格 open/close 部分省略）

{!! Form::select('company_id', $companies, null, ['class' => 'company2 form-control']) !!}
{!! Form::select('location_id', $locations, null, ['class' => 'location2 form-control']) !!}

查看（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>

视图在初始化时传递了一个活跃公司列表，即

$companies = Company::lists('trading_name', 'id');

Answer 1

将您的 javascript 替换为以下内容，您可能需要调整其中的一些内容。请务必仔细阅读评论。

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

从控制器抓取位置数据时更改以下内容

public function getLocations($companyId)
{
    return Location::where('company_id', $companyId)->lists('name', 'id');
}

Answer 2

你可以试试这个:

$.getJSON("getOptions.php", function (json) {
      $("#inputs").select2({
         data: json,
         width: "180px"
      });
 });

示例 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"}

使用 select2、json 请求和 Laravel 的动态下拉菜单

Dynamic dropdowns using select2, json request and Laravel

javascript

php

laravel

jquery-select2

laravel-5