[英]Dynamic dependent dropdown laravel
So, basically I want to create a dynamic dropdown on my form.所以,基本上我想在我的表单上创建一个动态下拉列表。
1 sasaran has many indikators, so what i want is, when i clicked 1 of the sasaran, indikator's dropdown will show up the indikator that belongs to that sasaran. 1 sasaran 有很多指标,所以我想要的是,当我单击 sasaran 中的 1 个时,指标的下拉列表将显示属于该 sasaran 的指标。 here's my view:这是我的观点:
<div class="form-group col-md-5">
<label for="sasaran_id">Sasaran</label>
<select id="sasaran_id"
class="selectpicker form-control @error ('sasaran_id') is-invalid @enderror"
name="sasaran_id">
<option selected disabled>--silahkan pilih sasaran berikut--</option>
@foreach ($sasaran_id as $datasasaran)
<option value="{{ $datasasaran->id }}">{{$datasasaran->sasaran}}</option>
@endforeach
</select>
@error('sasaran_id')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>
<div id="indikatorSection">
<div class="form-row align-items-end ml-2 indikator">
<div class="form-group col-md-5">
<label for="indikator_id">Indikator</label>
<select id="indikator_id"
class="form-control @error ('indikator_id') is-invalid @enderror"
name="indikator_id[]">
<option selected disabled>--silahkan pilih indikator berikut--</option>
@foreach ($indikator_id as $dataindikator)
<option value="{{ $dataindikator->id }}">{{$dataindikator->indikator}}</option>
@endforeach
</select>
@error('indikator_id')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>
<div class="form-group col-md-1">
<label for="target_kinerja">Target</label>
<input type="number" name="target_kinerja[]"
class="form-control @error('target_kinerja') is-invalid @enderror"
id="target_kinerja" placeholder="" value="{{old('target_kinerja')}}">
@error('target_kinerja')
<div class="invalid-feedback">
{{ $message }}
</div>
@enderror
</div>
<div class="form-group col-md-1">
<button type="button" id="tambahIndikator" class="btn btn-primary"> Tambah </button>
</div>
</div>
</div>
js js
<script>
$(document).ready(function () {
$('select[name=sasaran_id]').change(function() {
var url = '{{ url('sasaran') }}' + $(this).val() + '/indikator';
$.get(url, function(data) {
var select = $('form select[name=indikator_id[]]');
select.empty();
$.each(data,function(key, value) {
select.append('<option value=' + value.id + '>' + value.indikator + '</option>');
});
});
});
});
</script>
indikatorModel指标模型
public function sasaran()
{
return $this->belongsTo('App\ModelPerencanaan\SasaranModel');
}
sasaranModel sasaran模型
public function indikator()
{
return $this->hasMany('App\ModelPerencanaan\IndikatorModel','sasaran_id');
}
routes路线
Route::get('sasaran/{sasaran_id}/indikator', 'UnitKerja\Perencanaan\RabController@cariIndikator');
controller控制器
public function cariIndikator($sasaran_id)
{
$sasaran = SasaranModel::find($sasaran_id);
return $sasaran->indikator()->select('id', 'indikator')->get();
}
it works well when i tried the url on route.. but it seems my js didnt work :/ is there something i miss?当我在路由上尝试 url 时,它运行良好.. 但似乎我的 js 不起作用:/有什么我想念的吗?
Ahh i found the answer myself.. so basically after debugging the javascript i found that i cant select name with array so, what i need to put is [name="indikator[]"].啊,我自己找到了答案.. 所以基本上在调试 javascript 之后,我发现我无法用数组选择名称,所以我需要输入的是 [name="indikator[]"]。 then the code change as below:然后代码更改如下:
<script>
$(document).ready(function () {
$('select[name=sasaran_id]').change(function() {
var url = '{{ url('sasaran') }}' + '/' + $(this).val() + '/indikator';
console.log(url);
$.get(url, function(data) {
var select = $('form select[name="indikator_id[]"]');
select.empty();
$.each(data,function(key, value) {
select.append('<option value=' + value.id + '>' + value.indikator + '</option>');
});
});
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.