problemas con metodos select

alfa18 · #1 (**permalink**) 10/04/2011, 03:22

Hola amigos,
necesito ayuda con este codigo JS que me trae de cabeza:

<HTML>
<HEAD><TITLE>Caso practico JavaScript</TITLE>

<script type="text/javascript">
function LimpiarSelect(x) {
//fn que recibe el SELECT y elimina todos sus elementos(OPTION)
var i;
for(i=0;i<x.length;++i)
x.remove(i);
}

</script></HEAD>

<BODY bgcolor="orange">
<FORM name="form">
SELECT<select id="continente" size="7" multiple>
<option value="America">América</option>
<option value="Africa">África</option>
<option value="Asia">Asia</option>

<option value="Europa">Europa</option>
<option value="Oceania">Oceanía</option>
</select>
<BR>
Nuevo elemento:<BR>Texto<INPUT type="text" name="txt1"><BR>Valor<INPUT type="text" name="txt2"><BR>
<INPUT type="button" value="Añadir al select" onclick="AddElementoSelect(form.continente,form.tx t1,form.txt2)"><BR>
<INPUT type="button" value="Quitar del select" onclick="QuitarElementoSelect(form.continente,form .txt2)"><BR>
<INPUT type="button" value="Vaciar select" onclick="LimpiarSelect(form.continente)">
</FORM>
</BODY>
</HTML>

Vereis, al pulsar el boton "Vaciar select" solo me elimina las posiciones impares del SELECT(es decir, deja los elementos "Africa" y "Europa"), ¿alguien me puede decir por que y como solucionarlo?

Gracias, saludos:D

JavierB · #2 (**permalink**) 10/04/2011, 07:07

Hola alfa18

Prueba eliminando del último elemento al primero.

Saludos,

alfa18 · #3 (**permalink**) 10/04/2011, 09:05

Gracias JavierB, lo probe y funciona perfectamente......muchas gracias me tenia loco este eror

Veras, ahora me surgio un problema similar al anterior pero a la hora de añadir un OPTION al SELECT(metodo add())). Te envio el codigo JS:

<HTML>
<HEAD><TITLE>Caso practico JavaScript</TITLE>
<script type="text/javascript">
function AddElementoSelect(x,txt,val){
//fn que recibe el SELECT y le añade la OPTION txt(val)
if(txt.value=="") {
alert("Introduzca elemento de texto a añadir");
txt.focus();
exit; //sale de la fn en espera de mas datos
}

if(val.value=="") {
alert("Introduzca valor asociado al elemento a añadir");
val.focus();
exit;
}
x.add(txt.value,x.options[null]);
txt.value="";val.value="";
}

</script></HEAD>

<BODY bgcolor="orange">
<FORM name="form">
SELECT<select id="continente" size="7" multiple>
<option value="America">América</option>
<option value="Africa">África</option>
<option value="Asia">Asia</option>
<option value="Europa">Europa</option>
<option value="Oceania">Oceanía</option>
</select>
<BR>
Nuevo elemento:<BR>Texto<INPUT type="text" name="txt1"><BR>Valor<INPUT type="text" name="txt2"><BR>
<INPUT type="button" value="Añadir al select" onclick="AddElementoSelect(form.continente,form.tx t1,form.txt2)"><BR>
<INPUT type="button" value="Quitar del select" onclick="QuitarElementoSelect(form.continente,form .txt2)"><BR>
<INPUT type="button" value="Vaciar select" onclick="LimpiarSelect(form.continente)">
<P>RADIO<BR>
Primera <INPUT type="radio" name="ord" value="Primera" checked onclick="activar()"><BR>
Segunda <INPUT type="radio" name="ord" value="Segunda" onclick="activar()"><BR>
Tercera <INPUT type="radio" name="ord" value="Tercera" onclick="activar()"><BR>
<INPUT type="button" name="B1" value="Desmarcar todo" onclick="limpiaRB(form)">
<INPUT type="button" name="B2" value="Valor actual" onclick="valorRB(form)"> <INPUT type="button" value="Marca el segundo" onclick="ponvalorRB(form,'Segunda')">
</FORM>
</BODY>
</HTML>

Lo del "x.options[null]" lo saque de esta web: http://www.w3schools.com/jsref/met_select_add.asp, pero no se por que me da error en esa linea ¿alguna sugerencia?

Gracias de nuevo JavierB, saludos:D

zerokilled · #4 (**permalink**) 10/04/2011, 09:37

buenas,

Código:

x.add(txt.value,x.options[null]);

el problema aqui son los parametros pasados a la funcion add. leete lo que dice la descripcion de sintaxis en la url que has puesto. adicional, estudia el ejemplo que se muestra en el mismo lugar. fijate que tu estas pasando como argumento dos string mientras que la funcion requiere dos parametros de tipos distintos.

por cierto, en referencia al tema inicial. creo que es mas facil comprender el por qué sucede en lugar de aprenderte la solucion. comprender el por qué te ayudara no solo en este caso especifico, sino tambien a evaluar otras posibles soluciones. la razon del problema es que la coleccion de options es un objeto activo. cuando tu agregas o eliminas un option, lo veras reflejado en la coleccion, de modo que la propiedad length tambien se actualiza. es decir, al eliminar el primer <option>, el segundo <option> pasa a adquirir la posicion del eleminado. al actualizar el contador -variable i- ya no estas indicando la primera posicion, sino la segunda. asi sucesivamente en cada ciclo. otra forma de vaciar una coleccion de options es siempre indicando la primera posicion mientras la longitud sea mayor a cero.

Código:

while(select.length) select.remove(0);

alfa18 · #5 (**permalink**) 10/04/2011, 10:47

Gracias zerokilled, en efecto el 1er parametro tal y como muestra el ejemplo es un objeto(si?) y NO un string como suponia...........ese era mi error, lo cambie tal y como muestra el ejmplo, y me funciona prfectamente¡¡¡¡¡¡

En cuanto al tema del borrado dinamico, gracias por la explicacion zerokilled me aclaro el problema:D

muchas gracias a los dos por vuestra ayuda, JavierB y zerokilled, saludos:D