0

tengo estos dos selects:

<!-- campos solo para la cedula -->
        <div class="col-sm-2 form-floating" id="departamento_id_panel" name="departamento_id_panel" hidden>
          <select class="form-select" id="departamento_id" name="departamento_id">
              <option value=""></option>
              <?php foreach($departamentos as $departamento): ?>
                  <option value="<?= $departamento['codigo'] ?>"><?= $departamento['nombre'] ?></option>
              <?php endforeach; ?>
          </select>
          <label for="estado_id">Departamento de expedición*</label>
          <p class="small" style="color:red">
              <?= validation_show_error('departamento_id'); ?>
          </p>
        </div>

        <div class="col-sm-2 form-floating" id="municipio_id_panel" name="municipio_id_panel" hidden>
          <select class="form-select" id="municipio_id" name="municipio_id">
              <option value=""></option>
              <?php foreach($municipios as $municipio):; ?>
                  <option value="<?= $municipio['codigo'] ?>"><?= $municipio['nombre'] ?></option>
              <?php endforeach; ?>
          </select>
          <label for="estado_id">Municipio de expedición*</label>
          <p class="small" style="color:red">
              <?= validation_show_error('municipio_id'); ?>
          </p>
        </div>
        <!-- FIN campos solo para la cedula -->

Y quisiera que el segundo select solo muestre los municipios que tengan el mismo código del departamento, para lo que he empezado la función:

$(function() {
    $(document).on('change', '#departamento_id', function() {
      var departamento_codigo = $(this).find('option:selected').val();
      console.log(departamento_codigo);
    });
});

Aquí consigo el código del departamento seleccionado, pero no sé filtrar los municipios que tengan igual código.

Gracias por la ayuda.

4
  • Hola Jota, podrías implementar AJAX para recuperar solo los municipios que corresponden al departamento seleccionado. La idea sería algo similar a esto, pero yo iria por el lado de que la API/endpoint devuelva un JSON y no HTML, pero esto ya es una cuestión de gustos.
    – Marcos
    Commented el 10 ago. a las 9:26
  • Gracias Marcos. Lo he intentado aplicar en mi proyecto pero de momento sigo sin conseguirlo.
    – Jota
    Commented el 11 ago. a las 10:35
  • Jota, podes crear una nueva pregunta o editar esta explicando lo que deseas conseguir, donde esta el problema y agregando el código que llevas desarrollado (sobre todo el PHP) así vamos a poder ver hasta donde has llegado en la nueva implementación.
    – Marcos
    Commented el 11 ago. a las 10:52
  • Marco, he usado el ejempo de @Benito-B y funciona perfecto. Gracias por todo!
    – Jota
    Commented el 11 ago. a las 11:04

1 respuesta 1

1

para empezar vamos a modificar el PHP y por consecuente el javascript porque se va a agregar al PHP un pequeño cambio en el municipio para identificar a que depto. va a ser en este caso un data-departamento y entocnes el javascript va a detectar el cambio y va a tomar todas las opciones del select de municipios y va a mostrar todo lo que tengas en data-departamento seleccionado y lo demas se va a omitir.. al hacer esto el usuario selecciona un departamento y el segundo select solo mostrara los municipios asociados a ese departamento

<div class="col-sm-2 form-floating" id="departamento_id_panel" name="departamento_id_panel" hidden>
  <select class="form-select" id="departamento_id" name="departamento_id">
      <option value=""></option>
      <?php foreach($departamentos as $departamento): ?>
          <option value="<?= $departamento['codigo'] ?>"><?= $departamento['nombre'] ?></option>
      <?php endforeach; ?>
  </select>
  <label for="estado_id">Departamento de expedición*</label>
  <p class="small" style="color:red">
      <?= validation_show_error('departamento_id'); ?>
  </p>
</div>

<div class="col-sm-2 form-floating" id="municipio_id_panel" name="municipio_id_panel" hidden>
  <select class="form-select" id="municipio_id" name="municipio_id">
      <option value=""></option>
      <?php foreach($municipios as $municipio): ?>
          <option value="<?= $municipio['codigo'] ?>" data-departamento="<?= $municipio['departamento_codigo'] ?>"><?= $municipio['nombre'] ?></option>
      <?php endforeach; ?>
  </select>
  <label for="estado_id">Municipio de expedición*</label>
  <p class="small" style="color:red">
      <?= validation_show_error('municipio_id'); ?>
  </p>
</div>

para javascript

$(function() {
    $(document).on('change', '#departamento_id', function() {
        var departamento_codigo = $(this).val();
        $('#municipio_id option').each(function() {
            var municipioDepartamento = $(this).data('departamento');
            if (municipioDepartamento == departamento_codigo || $(this).val() == "") {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
        $('#municipio_id').val('');
    });
});
2
  • Qué java?? Aquí no veo ningún código java. Ni en la pregunta ni en la respuesta veo una sola pizca de java. Lo que hay es JAVASCRIPT, que es absolutamente diferente a JAVA. Confundir java y javascript es como confundir un coche con un submarino. Claro, si tiras tu coche al mar se va debajo del agua... pero créeme, sigue sin ser un submarino.
    – Benito-B
    Commented el 10 ago. a las 13:22
  • Gracias Benito. Yo no quería hablar de java. El proceso funciona perfecto. Eres un máquina.
    – Jota
    Commented el 11 ago. a las 11:03

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.