[英]Laravel: Ajax dynamic dependent dropdown
當我在選擇框中選擇特定國家時,則在狀態選擇框中必須填充所選國家的州數據,依此類推。 但是選擇國家(父選擇框)后,省(子)仍然為空。 事件(在瀏覽器控制台中)傳遞所選值,然后給出錯誤(請參見結果)。
我用不同的laravel版本嘗試了此代碼:5.4-5.7。 我對AJAX不太滿意。
CountryController.php
<?php
namespace App\Http\Controllers;
use IlluminateHttpRequest;
use IlluminateSupportFacadesInput;
use App\Provinces;
use App\Regencies;
use App\Districts;
use App\Villages;
class CountryController extends Controller
{
public function provinces(){
$provinces = Provinces::all();
return view('country.index', compact('provinces'));
}
public function regencies(){
$provinces_id = Input::get('province_id');
$regencies = Regencies::where('province_id', '=', $provinces_id)->get();
return response()->json($regencies);
}
public function districts(){
$regencies_id = Input::get('regencies_id');
$districts = Districts::where('regency_id', '=', $regencies_id)->get();
return response()->json($districts);
}
public function villages(){
$districts_id = Input::get('districts_id');
$villages = Villages::where('district_id', '=', $districts_id)->get();
return response()->json($villages);
}
}
楷模
區:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Districts extends Model
{
protected $table = 'districts';
}
省份:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Provinces extends Model
{
protected $table = 'provinces';
}
Regencies:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Regencies extends Model
{
protected $table = 'regencies';
}
Villages:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Villages extends Model
{
protected $table = 'villages';
}
視圖:index.blade.php
<div class="form-group">
<label for="">Your Provinces</label>
<select class="form-control" name="provinces" id="provinces">
<option value="0" disable="true" selected="true">=== Select Provinces ===</option>
@foreach ($provinces as $key => $value)
<option value="{{$value->id}}">{{ $value->name }}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="">Your Regencies</label>
<select class="form-control" name="regencies" id="regencies">
<option value="0" disable="true" selected="true">=== Select Regencies ===</option>
</select>
</div>
<div class="form-group">
<label for="">Your Districts</label>
<select class="form-control" name="districts" id="districts">
<option value="0" disable="true" selected="true">=== Select Districts ===</option>
</select>
</div>
<div class="form-group">
<label for="">Your Villages</label>
<select class="form-control" name="villages" id="villages">
<option value="0" disable="true" selected="true">=== Select Villages ===</option>
</select>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$('#provinces').on('change', function(e){
console.log(e);
var province_id = e.target.value;
$.get('/json-regencies?province_id=' + province_id,function(data) {
console.log(data);
$('#regencies').empty();
$('#regencies').append('<option value="0" disable="true" selected="true">=== Select Regencies ===</option>');
$('#districts').empty();
$('#districts').append('<option value="0" disable="true" selected="true">=== Select Districts ===</option>');
$('#villages').empty();
$('#villages').append('<option value="0" disable="true" selected="true">=== Select Villages ===</option>');
$.each(data, function(index, regenciesObj){
$('#regencies').append('<option value="'+ regenciesObj.id +'">'+ regenciesObj.name +'</option>');
})
});
});
$('#regencies').on('change', function(e){
console.log(e);
var regencies_id = e.target.value;
$.get('/json-districts?regencies_id=' + regencies_id,function(data) {
console.log(data);
$('#districts').empty();
$('#districts').append('<option value="0" disable="true" selected="true">=== Select Districts ===</option>');
$.each(data, function(index, districtsObj){
$('#districts').append('<option value="'+ districtsObj.id +'">'+ districtsObj.name +'</option>');
})
});
});
$('#districts').on('change', function(e){
// console.log(e);
var districts_id = e.target.value;
$.get('/json-village?districts_id=' + districts_id,function(data) {
// console.log(data);
$('#villages').empty();
$('#villages').append('<option value="0" disable="true" selected="true">=== Select Villages ===</option>');
$.each(data, function(index, villagesObj){
$('#villages').append('<option value="'+ villagesObj.id +'">'+ villagesObj.name +'</option>');
})
});
});
</script>
路線:
Route::get('/indonesia','CountryController@provinces');
Route::get('/json-regencies','CountryController@regencies');
Route::get('/json-districts', 'CountryController@districts');
Route::get('/json-village', 'CountryController@villages');
結果:
請聲明輸入外觀以在控制器中使用它。
use Illuminate\Support\Facades\Input;
請嘗試一下,讓我知道它是如何工作的:)
如果要使用第一個選項,請確保已導入Input Facade:
use Illuminate\Support\Facades\Input;
public function regencies(Request $request){
$provinces_id = $request->province_id;
$regencies = Regencies::where('province_id', '=', $provinces_id)->get();
return response()->json($regencies);
}
要么
導入HTTP請求並使用第二個選項:
use Illuminate\Http\Request;
public function regencies(Request $request){
$provinces_id = $request->province_id;
$regencies = Regencies::where('province_id', '=', $provinces_id)->get();
return response()->json($regencies);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.