在Laravel 6.0中使用AJAX不会显示从属下拉列表

时间:2019-12-26 03:04:39

标签: javascript php laravel

我正在尝试执行一些相关的下拉菜单,向我显示州,街道和 来自其他国家的教区,但下拉菜单仅显示州而不显示其他事物,我想知道发生了什么以及如何解决该问题

  • 在下面,我将显示下拉列表的代码,控制器中的函数,路线和脚本
  • 还有一个名为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

2 个答案:

答案 0 :(得分:0)

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

尝试在下拉菜单中添加数据

答案 1 :(得分:0)

我解决了此问题,将<form>method=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>