动态依赖下拉 laravel答案

【问题标题】：Dynamic dependent dropdown laravel动态依赖下拉 laravel
【发布时间】：2020-04-16 21:45:52
【问题描述】：

所以，基本上我想在我的表单上创建一个动态下拉列表。

1 sasaran 有很多指示器，所以我想要的是，当我单击 saran 的 1 时，指示器的下拉菜单将显示属于该 saran 的指示器。这是我的看法：

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

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

saranModel

public function indikator()
    {
        return $this->hasMany('App\ModelPerencanaan\IndikatorModel','sasaran_id');
    }

路线

Route::get('sasaran/{sasaran_id}/indikator', 'UnitKerja\Perencanaan\RabController@cariIndikator');

控制器

public function cariIndikator($sasaran_id)
    {
        $sasaran = SasaranModel::find($sasaran_id);
        return $sasaran->indikator()->select('id', 'indikator')->get();
    }

当我尝试路由上的 url 时效果很好。但似乎我的 js 没有工作：/ 有什么我想念的吗？

【问题讨论】：

开始调试javascript
你的 JS 到底在做什么？您的控制台中是否有任何输出或奇怪的行为？
@EnriqueBermúdezequest 没问题.. 但我收到错误，似乎我无法使用数组选择名称.. 如何解决这个问题？ prnt.sc/qg75q6

标签： javascript html laravel drop-down-menu

【解决方案1】：

啊，我自己找到了答案。所以基本上在调试了 javascript 之后，我发现我无法使用数组选择名称，所以我需要输入的是 [name="indikator[]"]。然后代码更改如下：

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

【讨论】：