[SOLUCIONADO] Select se vacía

[DoHITB]

Hola

Llevo toda la mañana ofuscado con un problema al que no le veo el fallo... a ver si me ayudáis, por favor.

Tengo dos selects:

Código PHP:

<select name="country" id="country" onmouseover="loadCountry(this);" onchange="manageCountry(this);"></select>
<select name="city" id="city"></select>
 

Y estas dos funciones:

Código Javascript:

function loadCountry(e){
    k='country';
    
    if(e.options.length>0){
        return false;
    }
    
    getEv('country', 'c=');//llamada AJAX con "eval()". El retorno es:
 
/*
retorno: 
G_country=[value|code, ...]
*/
 
 
    for(i=0;i<G_country.length;i++){//ge es una función que retorna el elemento con ese id
        gc = G_country[i].split('|');
        opt = document.createElement("OPTION");
        opt.innerText = gc[1];
        opt.value = gc[0];
        ge(k).add(opt, 0); 
    }
}
 
function manageCountry(e){
    getEv('country', 'c='+e.options[e.selectedIndex].value);
    k='city';
    for(i=0;i<G_country.length;i++){
        gc = G_country[i].split('|');
        opt = document.createElement("OPTION");
        opt.innerText = gc[1];
        opt.value = gc[0];
        ge(k).add(opt, 0); 
    }
}
 

El "onmouseover" funciona bien. Pero cuando selecciono algo en "country", me carga la lista de city (manageCountry, bien), pero la opción de "country" se me cambia al primer valor... y no entiendo porqué.

¿No se supone que al tener varias opciones, haría un return y detendría la función loadCountry?

Gracias por la ayuda.

[masterpuppet]

Tema movido desde PHP a Javascript

[quimfv]

No entiendo porque pones ese onmouseover...
Cada vez que pases por encima de ese selec se va a ejecutar la función... usa loadCountry(); una sola vez quizas en el onload del fichero...

Simplemente carga la lista de paises sin depender de nada mas luego para que ejecutar la función cada vez aun que termine en el return false....

Código Javascript:

function loadCountry(e){
    k='country';
   
    if(e.options.length>0){
        return false;
    }else{////<----
   
    getEv('country', 'c=');//llamada AJAX con "eval()". El retorno es:
 
/*
retorno:
G_country=[value|code, ...]
*/
 
 
    for(i=0;i<G_country.length;i++){//ge es una función que retorna el elemento con ese id
        gc = G_country[i].split('|');
        opt = document.createElement("OPTION");
        opt.innerText = gc[1];
        opt.value = gc[0];
        ge(k).add(opt, 0);
    }
}////<---
}
 

o des de el onload id='country'.

Código Javascript:

function loadCountry(id){
    
   e=ge(id);//ge es una función que retorna el elemento con ese id
    if(e.options.length==0){
 
    getEv(id, 'c=');//llamada AJAX con "eval()". El retorno es:
 
/*
retorno:
G_country=[value|code, ...]
*/
 
 
    for(i=0;i<G_country.length;i++){
        gc = G_country[i].split('|');
        opt = document.createElement("OPTION");
        opt.innerText = gc[1];
        opt.value = gc[0];
        e.add(opt, 0);
    }
}
 

[DoHITB]

Ufff, vaya... con el cabreo que llevaba encima no me he fijado en qué foro he posteado...

Pongo el mouseover porque viene de una llamada AJAX, así que no tengo de otra... o al menos eso creo

[cachusan]

Iniciado por DoHITB

Ufff, vaya... con el cabreo que llevaba encima no me he fijado en qué foro he posteado...

Pongo el mouseover porque viene de una llamada AJAX, así que no tengo de otra... o al menos eso creo

Estan entrando en conflicto los dos eventos.
Como bien te mencionaron antes, el evento de carga de paises, aunque lo hagas por ajax, deberás hacerlo por ejemplo al cargar el select, no ante un evento del mismo.

[DoHITB]

El conflicto de eventos lo veo, es decir, que antes del "onchange" siempre se producirá el "onmouseover". Pero si estoy comprobando la longitud de los campos del select no se supone que debería salir de la función en el primer "if"?

Inciso: el problema que me surge es que al seleccionar un valor en "country", el "city" me carga, y a la vez el "country" se vacía. He añadido el "else" que indica @quimfv, y también he movido la llamada a "loadCountry" a donde se llama al AJAX para generar esto.

[DoHITB]

Problema arreglado. El select "country" se vacía por la llamada AJAX (no se porque).

Así que he cambiado las siguientes cosas:

- Cada una de las dos funciones tendrá su variable
- Cambiado el modo en el que se añaden las options (ahora uso new Option())
- Cuando salta "onchange" de "country", ejecuto lo siguiente:

Código Javascript:

- Obtengo el índice seleccionado de 'country' => variable it
- Obtengo la lista de ítems para 'city' mediante AJAX (aquí se vacía 'country')
- Relleno 'city'
- Relleno 'country de nuevo, comparando con it para saber si es el seleccionado
 

Y ya. Cuando descubra porqué AJAX me vacía el select lo arreglaré mejor. Mientras, ya funciona.

[quimfv]

Después de llamar por AJAX el formulario debes ejecutar la función que carga los países... si para cargar las ciudades llamas otra vez todo el formulario es logico que países este otra vez vacío... podrías cargar por AJAX en el onchange de pais un php solo con el select de ciudades que reciba como parámetro el país y solo refresque un div donde solo haya el select de las ciudades.... como esta en el formulario si le das a submit después de elegir ciudad lo tendrá en cuenta como si no se hubiese cambiado... no se si me explico.

[DoHITB]

No cargo todo el formulario de nuevo.

La función "getEv()" hace una llamada AJAX que luego hace un "eval()" del resultado.

Entonces, en "loadCountry()" se que el retorno es "G_country=[value|text, ...]" y en "manageCountry()" el retorno es "G_city=[value|text, ...]".

De ahí a que se vacíe "country" cuando llamo al AJAX, no se qué pasa; pero desde luego si cargara todo el formulario de nuevo ya se que tendría que volver a cargarlo todo.

Desde luego hasta ayer tenía bien la función, haciendo una llamada AJAX "corriente" y luego haciendo un innerHTML, pero resulta que a IE no le da la gana de cargar de esa manera el select, por lo que me vi obligado a hacer todo lo del "eval()" y demás, dándome así el fallo...

Las funciones anteriores eran bien sencillas:

Código Javascript:

funcion loadCountry(e){
  if(e.options.length==0){
    get('country', 'c='); //cambia el elemento con id "country"
  }
}
 
function getCountry(e,c){
  getDtc('country', 'c='+e, 'city'); //cambia el elemento con id "city"
}
 

En fin, a ver si veo el fallo real... jejeje

Gracias por contestar.