Trình đơn thả xuống động bằng cách sử dụng select2, yêu cầu json và Laravel

Question

Tôi đang cố gắng để có được thả xuống động làm việc với Laravel và Select2. Có hai sự sụt giảm; một cho các công ty tức là "company2" và một cho các vị trí thuộc về công ty đó, tức là "location2".

Đối với cuộc sống của tôi, tôi không thể tìm ra cách làm cho "company2" thả xuống một sự kiện để đọc các vị trí công ty đó, nếu nó được thay đổi! Tôi đang làm gì sai trong phần javascript của mã này! (Công trình mọi thứ khác)

Route

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

Controller (ApiController) đầu ra

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

Ví dụ từ địa chỉ "api/địa điểm/7"

{"Yellowstone":"8"} 

View (hình thức mở/phần đóng bị bỏ qua)

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

View (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> 

Quan điểm được thông qua một danh sách các công ty hoạt động khi khởi nghĩa

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

Answer 1

Thay javascript của bạn với những điều sau đây, bạn có thể cần phải tinh chỉnh một số của nó . Hãy chắc chắn rằng bạn xem xét thông qua các ý kiến.

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

Thay đổi sau khi bạn lấy các dữ liệu vị trí từ bộ điều khiển

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

Answer 2

bạn có thể thử này:

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

dụ đầu ra 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"}