Foros del Web » Programando para Internet » Javascript »

Problemas con select dinámicos

Estas en el tema de Problemas con select dinámicos en el foro de Javascript en Foros del Web. Gracias programadormax, la opcion que me diste me sirvió para otras situaciones. Pasar y guardar los parametros por sesion al usar select da mejores resultados. ...
  #1 (permalink)  
Antiguo 01/05/2007, 12:01
Avatar de regiomaster  
Fecha de Ingreso: marzo-2006
Mensajes: 8
Antigüedad: 18 años, 1 mes
Puntos: 0
Problemas con select dinámicos

Gracias programadormax, la opcion que me diste me sirvió para otras situaciones. Pasar y guardar los parametros por sesion al usar select da mejores resultados. De esta manera los select para seleccionar sexo, edad y pais se mantienen con la opcion seleccionada mientras estas en la sesion. ¡WOW!

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 HTML:
<form name="AdminForm2">

<select name='sexo'>
<option value='0'>Seleccione
<option value='Hombre'>Hombre
<option value='Mujer'>Mujer
</select>

<select name='edad'>
<option value='0'>Seleccione
<option value='1'>18 a 25 años
<option value='2'>26 a 33 años
</select>

<select name="country" onChange="provincia()"  size="1">
              <option value="0">Seleccione
              <option value="México" >México
              <option value="Extranjero" >Extrajero
              </select>

<select name="state" onChange="city()" size="1">
              <option value="0" >Seleccione
</select>


<select name="city"  size="1" >
              <option value="0" >Seleccione
              </select>
           	  <input type="submit" value="Buscar" />

</form> 

Última edición por regiomaster; 09/06/2007 a las 18:01
  #2 (permalink)  
Antiguo 01/05/2007, 13:17
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 6 meses
Puntos: 45
Re: Problemas con select dinámicos

Ojo que en Firefox no me ha funcionado! Puede ser porque el formulario no existe (te has dejado las etiquetas <FORM>).

Hace unos días publiqué un código:
SELECTS dependientes con inteligencia hacia atrás
Que además de cambiar las provincias y las ciudades al seleccionar un pais, también al seleccionar una ciudad se cambia dinámicamente al pais y la provincia a los que pertenece la ciudad.

Fíjate también en el método para seleccionar una opción, para que funcione en los dos navegadores. Y además el agregar una opción con el new Option().

También creo que debes tocar la manera de "vaciar" un select, haciendo
Código PHP:
        //si no había provincia seleccionada, elimino las provincias del select
        
document.AdminForm2.state.length 
Quizás sea un poco "bestia", deberías ir quitándolas con un while, ya que la propiedad length en teoría no se debe modificar, es sólo para consulta (aunque me ha funcionado, luego al enviar el formulario pueden pasar cosas raras).


Y una última cosa:
Código PHP:
var provincias_México 
Las variables en javascript tienen ciertas reglas al nombrarlas:
Cita:
Iniciado por http://developer.mozilla.org/es/docs/Gu%C3%ADa_JavaScript_1.5:Variables
Un identificador JavaScript debe empezar con una letra, guión bajo [underscore] (_), o el signo de dólar [dollar sign] ($); los caracteres subsecuentes tambien pueden ser dígitos (0-9). Debido a que JavaScript es [case sensitive], la letras incluyen los caracteres desde la "A" hasta la "Z" (Mayúsculas) y los caracteres desde la "a" hasta la "z" (minúsculas).

Comenzando por JavaScript 1.5, usted puede utilizar en los identificadores las letras ISO 8859-1 o Unicode tales como å y ü. Usted también puede utilizar las secuencias de escape Unicode \uXXXX listadas en la página Secuencias de escape Unicode como caracteres en los identificadores.
No dice que no se puedan tildes, a partir de js1.5 sí que se puede teóricamente... pero yo no te lo aconsejo, claro que por otra parte así tu planteamiento del script se va un poco al garete... Pero siempre puedes utilizar una función para quitar tildes a la palabra México.


Espero que soluciones tu problema, un saludo.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #3 (permalink)  
Antiguo 01/05/2007, 16:45
Avatar de regiomaster  
Fecha de Ingreso: marzo-2006
Mensajes: 8
Antigüedad: 18 años, 1 mes
Puntos: 0
Re: Problemas con select dinámicos

Gracias por tu interes en ayudar. Tal vez no haya funcionado porque estoy programando en php, pero estoy insertando codigo javascript. Estoy intentando aprender, claro al principio cometes errores, sobre todo que lo hago en mis tiempos libres. Volvi a copiar el codigo anterior en html, quitando variables php que mantenian las variables a traves de la sesion.

De nuevo el código funcionando en html:

Código HTML:
<form name="AdminForm2">

<select name='sexo'>
<option value='0'>Seleccione
<option value='Hombre'>Hombre
<option value='Mujer'>Mujer
</select>

<select name='edad'>
<option value='0'>Seleccione
<option value='1'>18 a 25 años
<option value='2'>26 a 33 años
</select>

<select name="country" onChange="provincia()"  size="1">
              <option value="0">Seleccione
              <option value="México" >México
              <option value="Extranjero" >Extrajero
              </select>

<select name="state" onChange="city()" size="1">
              <option value="0" >Seleccione
</select>


<select name="city"  size="1" >
              <option value="0" >Seleccione
              </select>
           	  <input type="submit" value="Buscar" />

</form>


Última edición por regiomaster; 09/06/2007 a las 18:00
  #4 (permalink)  
Antiguo 01/05/2007, 17:20
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 20 años, 6 meses
Puntos: 45
Re: Problemas con select dinámicos

Una cosa, a veces me ocurre que al hacer un copy paste de un código se me copia en una sola línea, como en el ultimo post tuyo regiomaster, y no sé por qué puede ser. En tu primer post si que estaba el código identado y bien en sus renglones, pero en este caso no.

Bueno, al final lo conseguí poner todo como sale en los foros para trabajar con él.

Me he fijado en que no cierras los <OPTION>, todas las etiquetas (x)HTML han de ir cerradas, incluso las que no tienen cierre (<br />).

Funciona en FF2 y en IE, ojo al detalle que si seleccionamos México y, por ejemplo, Aguascalientes, se muestran las ciudades. Después cambiamos México por extranjero, y se limpian las provincias, pero no así las ciudades.


Cita:
Iniciado por regiomaster
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.
¿Qué action tienes en el FORM? Los datos llegan bien a la página de búsqueda ¿no?

Si te refieres a que el action lo tienes en la misma página, y que quieres que estén los selects como estaban al pulsar el botón de búsqueda, se me ocurren varias maneras:
- Por PHP lees lo que se ha mandado, y escribes en el documento una variable de estado javascript. Esa variable javascript (esas variables) modificarán los selects en la carga de la página para que los selects se muestren como se ha seleccionado anteriormente.
- Lees qué se ha enviado por javascript (lo malo de este método es que sólo se puede si lo haces con GET).
- Guardas una cookie para conservar el estado de los selects cuando se pulsó buscar (un poco engorroso quizás).


De paso te he cerrado las etiquetas y te he retocado la manera de agregar opciones y de borrarlas, haciendo el código un poco más elegante y cortito:

Código PHP:
<form name="AdminForm2">

<
select name="country" onChange="cambia_provincia()" size="1">
    <
option value="0">Seleccione</option>
    <
option value="México" >México</option>
    <
option value="Extranjero" >Extrajero</option>
</
select>
<
select name="state" onChange="cambia_city()" size="1">
    <
option value="0">Seleccione</option>
</
select>
<
select name="city" size="1" >
    <
option value="0" >Seleccione</option>
</
select>
<
input type="submit" value="Buscar" />

</
form>

<
script>
//defino una serie de varibles Array para cada país
var provincias_México=new Array("Seleccione","Aguascalientes""Baja California")
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 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)
        
//para cada provincia del array, la introduzco en el select
        
for(i=0i<mis_provincias.lengthi++){
           
document.AdminForm2.state.options[i]=new Option(mis_provincias[i], mis_provincias[i]);
        }
    }else{
        
//si no había provincia seleccionada, elimino las provincias del select
        
while (document.AdminForm2.state.length 1) {        //borramos todo excepto la primera opción (seleccione)
            
document.AdminForm2.state.options[1]=null;
        }
    }
    
//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 statedocument.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)
        
//para cada provincia del array, la introduzco en el select
        
for(i=0;i<mis_citys.length;i++){
           
document.AdminForm2.city.options[i]=new Option(mis_citys[i],mis_citys[i]);
        }    
    }else{
        
//si no había provincia seleccionada, elimino las provincias del select
        
while (document.AdminForm2.city.length 1) {        //borramos todo excepto la primera opción (seleccione)
            
document.AdminForm2.city.options[1]=null;
        }
    }
    
//marco como seleccionada la opción primera de provincia
    
document.AdminForm2.city.options[0].selected true;
}

</script> 
Saludos.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:32.