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>";
}
?>
$('#jmr_contacto_municipio').empty();
inmediatamente antes de la instrucción$("#jmr_contacto_municipio").append(data);
?