gpt4 book ai didi

javascript - Laravel:Ajax 动态依赖下拉列表

转载 作者:行者123 更新时间:2023-11-30 06:19:36 24 4
gpt4 key购买 nike

当我在选择框中选择特定国家时,州选择框中必须填写所选国家/地区的州数据等。但是在选择国家(父选择框)后,省(子)仍然是空的。事件(在浏览器控制台中)正在传递选定的值,然后给出错误(见结果)。

我用不同的 laravel 版本尝试了这段代码:5.4 - 5.7。我不太擅长 AJAX。

国家 Controller .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');

结果:


Please see the error here

最佳答案

请声明 Input Facade 以在您的 Controller 中使用它。

use Illuminate\Support\Facades\Input;

请试试这个,让我知道它是如何工作的:)

关于javascript - Laravel:Ajax 动态依赖下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53974068/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com