Elenchi a discesa dinamici utilizzando select2, json request e Laravel

Question

Sto cercando di ottenere dropdown dinamici lavorando con Laravel e Select2. Ci sono due drop down; uno per le aziende, ad esempio "company2" e uno per le sedi che appartengono a tale società, ad esempio "location2".

Per la vita di me, non riesco a capire come far scoppiare la "company2" a un evento per leggere le sedi delle aziende, se è cambiato! Cosa sto facendo male nella sezione javascript di questo codice! (tutto il resto funziona)

rotta

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

Controller (ApiController) uscita

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

Esempio dall'indirizzo "api/luoghi/7"

{"Yellowstone":"8"} 

View (forma aperta/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)

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

La vista è passato un elenco di aziende attive se inizializzato cioè

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

Answer 1

Sostituisci il tuo javascript con la seguente, potrebbe essere necessario modificare alcuni di essi . Si prega di assicurarsi di guardare attraverso i commenti.

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 quanto segue quando si afferra i dati di localizzazione dal controller

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

Answer 2

si può provare questo:

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

esempio uscita 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"}