在 Laravel 6.0 中使用 AJAX 不显示依赖下拉菜单

Question

我正在尝试做一些相关的下拉菜单，显示来自州、街道和 来自其他国家的教区，但下拉列表只显示州而不是其他事情，我想知道发生了什么以及我该如何解决它

• 下面我将让我的下拉代码、控制器中的函数、路由和脚本
• 还有一个名字叫Lugar的东西是我的模型

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

我解决了这个问题，将我的<form>withmethod=POST 放在具有 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>