1

Estoy cargando un select dinámico dentro de un modal sobre estados y municipios. Uso la clase selectpicker de Bootstrap, ajax y traigo los datos desde un array dentro de un archivo de php. Durante la primera ejecución. Muestra los municipios del estado seleccionado, pero al seleccionar otro estado muestra los datos anteriores más los datos de la selección actual. Ya probé viendo en consola la información que devuelve ajax y ES sólo la que necesito. El problema es el selectpicker. Ya intenté esto:
$("#jmr_contacto_municipio").selectpicker('refresh'); pero sigue haciendo lo mismo. Anexo mi codigo:

<div class="form-group">
     <label for="jmr_contacto_estado" class="bmd-label-floating">Estado *</label>
     <select class="form-control selectpicker" data-style="btn btn-link" id="jmr_contacto_estado" name="jmr_contacto_estado">
     </select>
</div>
<div class="form-group">
      <label for="jmr_contacto_municipio" class="bmd-label-floating">Municipio *</label>
      <select class="form-control selectpicker" data-style="btn btn-link" id="jmr_contacto_municipio" name="jmr_contacto_municipio">
      </select>
</div>

El código JavaScript es el siguiente:

$(document).ready(function() {
  // Obtener estados
     $.ajax({
         type: "POST",
         url: "http://localhost/material/procesar-estados.php",
         data: { estados : "Mexico" } 
     }).done(function(data){
         $("#jmr_contacto_estado").selectpicker();
         $("#jmr_contacto_estado").append(data);
         $("#jmr_contacto_estado").val(data);
         $("#jmr_contacto_estado").selectpicker('refresh');

      });

      // Obtener municipios
      $("#jmr_contacto_estado").on('change', function(){
      var estado = $("#jmr_contacto_estado option:selected").val();
      console.log(estado);
      $.ajax({
         type: "POST",
         url: "http://localhost/material/procesar-estados.php",
         data: { municipios : estado } 
         }).done(function(data){
             console.log(data);//Aqui verifico que los datos devueltos son correctos
             $("#jmr_contacto_municipio").selectpicker();
             $("#jmr_contacto_municipio").append(data);
             $("#jmr_contacto_municipio").val(data);
             $("#jmr_contacto_municipio").selectpicker('refresh');
      });

     });
});//Fin de document.ready

Las partes importantes de PHP:

<?php
    if(isset($_POST["estados"])){
    // Capture selected country
       $country = $_POST["estados"];

    // Define country and city array     
       $countryArr = array( 
            "Mexico" => array("Selecciona tu estado","Aguascalientes", "Todos los estados");..

       foreach($countryArr[$country] as $value){
            echo "<option>". $value . "</option>";
       }
    }

    if(isset($_POST["municipios"])){
       // Capture selected country
       $municipios = $_POST["municipios"];

       // Define country and city array
       $municipiosARR = array("Estado" => array("Selecciona tu 
         municipio","Municipio"), "Los demás estados" => "Los demás municipios");

    foreach($municipiosARR[$municipios] as $value){
        echo "<option>". $value . "</option>";
    }
?>
5
  • 1
    ¿Responde esto a tu pregunta? eliminar todos los select de un option cargados dinamicamente
    – Triby
    Commented el 2 abr. 2020 a las 23:00
  • Triby, ya lo aplique y no me funcionó Commented el 2 abr. 2020 a las 23:09
  • Por favor edita tu pregunta para ver qué fue lo que cambiaste y tratar de averiguar porqué no funcionó.
    – Triby
    Commented el 2 abr. 2020 a las 23:11
  • 1
    ¿ De verdad ejecutaste $('#jmr_contacto_municipio').empty(); inmediatamente antes de la instrucción $("#jmr_contacto_municipio").append(data); ?
    – quevedo
    Commented el 2 abr. 2020 a las 23:13
  • quevedo, la había colocado después del $("#jmr_contacto_municipio").selectpicker('refresh'); pero gracias a tu comentario lo corregí y ya quedó. Gracias Commented el 2 abr. 2020 a las 23:25

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.