在 Laravel 6.0 中使用 AJAX 不顯示相關下拉列表

Question

我正在嘗試做一些相關的下拉列表，向我顯示來自其他國家/地區的州、街道和教區的信息，但下拉列表僅顯示州而不是其他內容，我想知道發生了什么以及如何解決它

• 下面我將讓我的下拉列表的代碼，我在控制器中的函數，我的路由和我的腳本
• 還有一個叫Lugar東西是我的模特

Cliente_naturalController中的函數Cliente_naturalController

 public function getMunicipio(Request $request){
        if ($request->ajax()){
             $municipios = Lugar::where('fk_lugar',$request->id_lugar)->get();
             foreach($municipios as $municipio){
                 $municipiosArray[$municipio->id_lugar] = $municipio->nombre;
             }

             return response()->json($municipiosArray);
         }
     }

     public function getParroquia(Request $request){
         if ($request->ajax()){
              $parroquias = Lugar::where('fk_lugar',$request->id_lugar)->get();
              foreach($parroquias as $parroquia){
                  $parroquiasArray[$parroquia->id_lugar] = $parroquia->nombre;
              }
              return response()->json($parroquiasArray);
          }
      }

不起作用的下拉代碼

 <div class="form-group row">
                        <label for="lugar" class="col-md-5 col-form-label text-md-right">Municipio</label>

                        <div class="col-md-6">
                            <select id="municipio" data-old="{{ old('id_lugar') }}" name="id_lugar" class="form-control{{ $errors->has('id_lugar') ? ' is-invalid' : '' }}"></select>

                            @if ($errors->has('id_lugar'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('id_lugar') }}</strong>
                                </span>
                            @endif
                        </div>
                      </div>

                      <div class="form-group row">
                        <label for="lugar" class="col-md-5 col-form-label text-md-right">Parroquia</label>

                        <div class="col-md-6">
                            <select id="parroquia" data-old="{{ old('id_lugar') }}" name="id_lugar" class="form-control{{ $errors->has('id_lugar') ? ' is-invalid' : '' }}"></select>

                            @if ($errors->has('id_lugar'))
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $errors->first('id_lugar') }}</strong>
                                </span>
                            @endif
                        </div>
                      </div>

路線

Route::get('/municipios', 'Cliente_naturalController@getMunicipio');

Route::get('/parroquias','Cliente_naturalController@getParroquia');

視圖中的腳本

@section('script')
    <script>
            $('#estado').on('change',function(){
                var id_estado = $(this).val();
                //console.log(id_estado);
                if ($.trim(id_estado) != ''){
                    $.get('municipio',{id_lugar:id_estado},function(municipios){
                        console.log(municipios);
                        $("#municipio").find('option').remove();
                        $('#municipio').append("<option value=''>Selecciona un municipio</option>");
                        $.each(municipios,function(index,valor){
                            $('#municipio').append("<option value='" + index + "'>" + valor + "</option>")
                        });
                    });
                }
            });
    </script>

    <script>
            $('#municipio').on('change',function(){
                var id_municipio = $(this).val();
                if ($.trim(id_municipio) != ''){
                    $.get('parroquias',{id_lugar:id_municipio},function(parroquias){
                        $("#parroquia").find('option').remove();
                        $('#parroquia').append("<option value=''>Selecciona una parroquia</option>");
                        $.each(parroquias,function(index,valor){
                            $('#parroquia').append("<option value'" + index + "'>" + valor + "</option>")
                        });
                    });
                }
            });
    </script>
@endsection

Answer 1

$("#municipio").empty(); 
let appendData = `<option value=''>Selecciona un municipio</option>`; 
$.each(municipios,function(index,valor){ 
   appendData += `<option value="${index}">${valor}</option>`) 
});
$('#municipio').append(appendData)

嘗試在下拉列表中附加數據

Answer 2

我解決了這個問題，將帶有method=POST <form>放在具有 Laravel 的寄存器的同一個視圖中，結果視圖有兩個使用不同控制器的表單，也停用了這個腳本<script src="{{ asset('js/app.js') }}" defer></script>

*看起來像這樣*

<form method="POST" action="{{ route('register') }}">
 @csrf
<div class="form-group row " id="name" >
                          <label for="name" class="col-md-5 col-form-label text-md-right" >{{ __('Primer Nombre') }}</label>

                          <div class="col-md-7">

                              <input id="name" type="text" placeholder="Primer Nombre" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>

                              @error('name')
                                  <span class="invalid-feedback" role="alert">
                                      <strong>{{ $message }}</strong>
                                  </span>
                              @enderror
                          </div>
                      </div>
</form>

 <form method="POST" action="/clienteNatural">
  @csrf
 <div class="form-group row">
                <label for="lugar" class="col-md-8 col-form-label text-md-right">DIRECCION</label>
              </div>

              <div class="form-group row">
                <label for="lugar" class="col-md-5 col-form-label text-md-right">Estado</label>

                <div class="col-md-6">
                    <select id="estado" name="id_lugar" class="form-control{{ $errors->has('id_lugar') ? ' is-invalid' : '' }}">
                        @foreach($lugares->get() as $index => $lugar)
                            <option value="{{ $index }}" {{ old('id_lugar') == $index ? 'selected' : '' }}>
                                {{ $lugar }}
                            </option>
                        @endforeach
                    </select>

                    @if ($errors->has('id_lugar'))
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $errors->first('id_lugar') }}</strong>
                        </span>
                    @endif
                </div>
              </div>

              <div class="form-group row">
                <label for="lugar" class="col-md-5 col-form-label text-md-right">Municipio</label>

                <div class="col-md-6">
                    <select id="municipio" data-old="{{ old('id_lugar') }}" name="id_lugar" class="form-control{{ $errors->has('id_lugar') ? ' is-invalid' : '' }}"></select>

                    @if ($errors->has('id_lugar'))
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $errors->first('id_lugar') }}</strong>
                        </span>
                    @endif
                </div>
              </div>
</form>