0

Tengo un arreglo multidimensional que quiero mostrar en dos form select uno de los form select es "Estado" y el otro es "Municipio". La cuestión es mostrar en la vista blade el contenido de ambos y que por supuesto cuando se seleccione un Estado en el segundo form select se carguen los Municipios correspondientes.

$estados = collect([
        [
            'estado' => 'estado1',
            'municipio' => ['municipio1', 'municipio2', 'municipio3']
        ],
        [
            'estado' => 'estado2',
            'municipio' => ['municipio4', 'municipio5', 'municipio6']
        ],
        [
            'estado' => 'estado3',
            'municipio' => ['municipio7', 'municipio8', 'municipio9']
        ]
    ]);

La idea aproximada sería así.Y luego en la vista Blade tendría los dos form select.

          <div class="form-group">
          <label>Estado</label>
          <select class="form-control select2" style="width: 100%;">
          @foreach($estados as $estado)
           <option>{{$estado['estado']}}</option>
           @endforeach
          </select>
           </div>

De esta forma si me muestra los estados pero no se como lograr que me muestre los municipios que corresponden a cada estado seleccionado.

1 respuesta 1

1

Si quieres modificar el HTML de tu página necesitas hacer uso de javascript, de lo contrario la única opción que tendrías con PHP es recargando la página de nuevo una vez seleccionado el "estado".

La forma correcta y más habitual sería mediante javascript y ajax. Te dejo aquí el código totalmente funcional de tu pregunta.

En el primer select agregamos una función javascript al evento onchange llamada obtenerMunicipios a la cual se le llama y pasa el valor seleccionado cada vez que es cambiado. Agregamos un id="municipio" al segundo select el cual será modificado dependiendo el valor del "estado" seleccionado.

<select class="form-control select2" style="width: 100%;" onchange="obtenerMunicipios(this.value)">
   @foreach($estados as $estado)
      <option>{{$estado['estado']}}</option>
   @endforeach
</select>
<select id="municipios" class="form-control select2" style="width: 100%;"></select>

La función javascript objtenerMunicipios realiza una llamada AJAX al servidor con el estado seleccionado para obtener sus municipios. Seguidamente pintará en el HTML una option en el select "municipios" por cada municipio obtenido.

<script type="text/javascript">
    function obtenerMunicipios(estado){
        $.ajax({
            type:'GET',
            url:'/ajaxObtenerMunicipio/'+estado,
            success:function(data){
                var selectMunicipios = $('#municipios');
                selectMunicipios.empty();
                for (var i=0; i<data.length; i++) {
                    selectMunicipios.append('<option>' + data[i] + '</option>');
                }
            }
        });
    }
</script>

Implementamos la función ajax en PHP desde la que obtener los municipios. En laravel por ejemplo, se podría declarar la función de la siguiente forma:

Route::get('/ajaxObtenerMunicipio/{estado}', function ($estado) {

    $estados = collect([
        [
            'estado' => 'estado1',
            'municipio' => ['municipio1', 'municipio2', 'municipio3']
        ],
        [
            'estado' => 'estado2',
            'municipio' => ['municipio4', 'municipio5', 'municipio6']
        ],
        [
            'estado' => 'estado3',
            'municipio' => ['municipio7', 'municipio8', 'municipio9']
        ]
    ]);

    $municipios = $estados->where('estado', $estado)->pluck('municipio')->flatten();

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

Espero haberte podido ayudar con esta respuesta :)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.