Les comento mi nuevo problema. Tengo unos selects dependientes que funcionan bien
<form action="" name="profileForm" id="profileForm" method="POST" class="form">
<div class="form-column">
<div class="form-input">
<label>País</label>
<?php $countries = $querys->getCountries(); ?>
<div class="form-select">
<select name="country" id="country">
<option value="" hidden>Seleccione País</option>
<?php foreach ($countries as $country){ ?>
<option value="<?php echo $country['id'] ?>"><?php echo $country['name'] ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="form-input">
<label>Provincia</label>
<div class="form-select">
<select name="province" id="province">
<option value="" hidden>Seleccione Provincia</option>
</select>
</div>
</div>
</div>
<div class="form-column">
<div class="form-input">
<label>Ciudad</label>
<div class="form-select">
<select name="city" id="city">
<option value="" hidden>Seleccione Ciudad</option>
</select>
</div>
</div>
</div>
</form>
Primero cargo la lista de países y luego con JS hago
$(document).ready(function(){
$("#country").change(function(){
getProvinces($("#country").val());
});
$("#province").change(function(){
getCities($("#province").val());
});
});
function getProvinces(country){
$.get("loadData.php","country="+country, function(data){
$("#province").html(data);
var province = $("#province").val();
getCities(province);
});
}
function getCities(province){
$.get("loadData.php","province="+province, function(data){
$("#city").html(data);
});
}
loadData.php tiene lo siguiente
<?php
if ($_GET) {
if (isset($_GET['country'])) {
include_once '../core/querys.php';
$country = $_GET['country'];
$provinces = $querys->getProvinces($country);
echo '<option value="" hidden>Seleccione Provincia</option>';
foreach ($provinces as $province) {
echo '<option value="'.$province['id'].'">'.$province['name'].'</option>';
}
}
if (isset($_GET['province'])) {
include_once '../core/querys.php';
$province = $_GET['province'];
$cities = $querys->getCities($province);
echo '<option value="" hidden>Seleccione Ciudad</option>';
foreach ($cities as $city) {
echo '<option value="'.$city['id'].'">'.$city['name'].'</option>';
}
}
}
?>
Funciona tal cual debe funcionar, es rápido y todo bien. El problema viene cuando quiero poblar con la data que ya tengo guardada en la DB y quiero cambiar por ejemplo de ciudad o provincia, sin el evento change
del select anterior no me funciona, debo cambiar país y hacer toda la vuelta, cosa que se que no es correcto.
Este sería mi nuevo HTML con los valores de la DB, se muestran los datos de los value
y los labels
<?php $profile = $querys->getProfile($idUserSession)[0]; ?>
<form action="" name="profileForm" id="profileForm" method="POST" class="form">
<div class="form-column">
<div class="form-input">
<label>País</label>
<?php $countries = $querys->getCountries(); ?>
<div class="form-select">
<select name="country" id="country">
<option value="<?php echo $profile['country']; ?>" hidden><?php echo $profile['country_name']; ?></option>
<?php foreach ($countries as $country){ ?>
<option value="<?php echo $country['id'] ?>"><?php echo $country['name'] ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="form-input">
<label>Provincia</label>
<div class="form-select">
<select name="province" id="province">
<option value="<?php echo $profile['province']; ?>" hidden><?php echo $profile['province_name']; ?></option>
</select>
</div>
</div>
</div>
<div class="form-column">
<div class="form-input">
<label>Ciudad</label>
<div class="form-select">
<select name="city" id="city">
<option value="<?php echo $profile['city']; ?>" hidden><?php echo $profile['city_name']; ?></option>
</select>
</div>
</div>
</div>
</form>
Según este extenso post de SOes debo usar un trigger para que sin necesidad del evento change
del select anterior yo pueda cambiar ya sea la provincia o la ciudad. He intentado con
const country = document.querySelector('#country');
const province = document.querySelector('#province');
const city = document.querySelector('#city');
province.addEventListener('change', function(event) {
country.dispatchEvent(
new MouseEvent('change', {
bubbles: true,
cancelable: true,
view: window,
}));
});
city.addEventListener('change', function(event) {
country.dispatchEvent(
new MouseEvent('change', {
bubbles: true,
cancelable: true,
view: window,
}));
});
country.addEventListener('change', function(event) {
getProvinces($("#country").val());
getCities($("#province").val());
});
province.addEventListener('change', function(event) {
getProvinces($("#country").val());
getCities($("#province").val());
});
function getProvinces(country){
$.get("loadData.php","country="+country, function(data){
$("#province").html(data);
var province = $("#province").val();
getCities(province);
});
}
function getCities(province){
$.get("loadData.php","province="+province, function(data){
$("#city").html(data);
});
}
Y aunque se muestran algunos datos no funciona ni cuando tengo datos cargados de la DB ni cuando aun no se han llenado esos datos. Se que ando cerca, pero JS siempre ha sido mi piedra en el zapato.
Alguna idea de como solventarlo?