Tengo un select donde al seleccionar el pais, se rellena dinamicamente el select de provincias/estados y al seleccionar un estado cambia dinamicante el correspondiente a las ciudades, los select se llenan correctamente. Esto se logra con un javascript.
El problema surge cuando selecciono una provincia o una ciudad y realizo la busqueda, ya que se vacian los select llenados dinamicamente, cuando deberia quedar llena con los nombres de los estados y ciudades y con la opcion elegida seleccionada.
Alguien tiene una idea de como hacerle para mantener la opcion seleccionada y todas las opciones disponibles del select como en el caso de select estaticos. He buscado informacion pero solo encuentro casos simples.
Código:
<script>
//defino una serie de varibles Array para cada país
var provincias_México=new Array("Seleccione","Aguascalientes", "Baja California", "Baja California Sur")
var provincias_Extranjero=new Array("No disponible.")
//función que cambia las provincias del select de provincias en función del país que se haya escogido en el select de país.
function cambia_provincia(){
//tomo el valor del select del pais elegido
var country
country = document.AdminForm2.country[document.AdminForm2.country.selectedIndex].value
//miro a ver si el pais está definido
if (country != 0) {
//si estaba definido, entonces coloco las opciones de la provincia correspondiente.
//selecciono el array de provincia adecuado
mis_provincias=eval("provincias_" + country)
//calculo el numero de provincias
num_provincias = mis_provincias.length
//marco el número de provincias en el select
document.AdminForm2.state.length = num_provincias
//para cada provincia del array, la introduzco en el select
for(i=0;i<num_provincias;i++){
document.AdminForm2.state.options[i].value=mis_provincias[i]
document.AdminForm2.state.options[i].text=mis_provincias[i]
}
}else{
//si no había provincia seleccionada, elimino las provincias del select
document.AdminForm2.state.length = 1
//coloco un guión en la única opción que he dejado
document.AdminForm2.state.options[0].value = "Seleccione"
document.AdminForm2.state.options[0].text = "Seleccione"
}
//marco como seleccionada la opción primera de provincia
document.AdminForm2.state.options[0].selected = true
}
var citys_1=new Array("Seleccione","Aguascalientes", "Rincón de Romos" )
var citys_2=new Array("Seleccione","Mexicali", "Tijuana","Ensenada", "Tecate","Rosarito")
//función que cambia las ciudades del select.
function cambia_city(){
//tomo el valor del select de la estado elegido.
var state
state = document.AdminForm2.state[document.AdminForm2.state.selectedIndex].value
//miro a ver si el pais está definido
if (state != 0) {
//si estaba definido, entonces coloco las opciones de la provincia correspondiente.
//selecciono el array de provincia adecuado
mis_citys=eval("citys_" + document.AdminForm2.state.selectedIndex)
//calculo el numero de provincias
num_citys = mis_citys.length
//marco el número de provincias en el select
document.AdminForm2.city.length = num_citys
//para cada provincia del array, la introduzco en el select
for(i=0;i<num_citys;i++){
document.AdminForm2.city.options[i].value=mis_citys[i]
document.AdminForm2.city.options[i].text=mis_citys[i]
}
}else{
//si no había provincia seleccionada, elimino las provincias del select
document.AdminForm2.city.length = 1
//coloco un guión en la única opción que he dejado
document.AdminForm2.city.options[0].value = "Seleccione"
document.AdminForm2.city.options[0].text = "Seleccione"
}
//marco como seleccionada la opción primera de provincia
document.AdminForm2.city.options[0].selected = true
}
</script>
<select name="country" onChange="cambia_provincia()" size="1">
<option value="0">Seleccione
<option value="México" <?php if ($_SESSION['buscaFiltros']['country'] == México) { echo 'Selected'; } ?> >México
<option value="Extranjero" <?php if ($_SESSION['buscaFiltros']['country'] == Extranjero) { echo 'Selected'; } ?> >Extrajero
</select>
<select name="state" onChange="cambia_city()" size="1">
<option value="0" >Seleccione
</select>
<select name="city" size="1">
<option value="0">Seleccione
</select>
