martes, 20 de abril de 2010

Modificar desplegable con javascript

Partimos de un desplegable de municipios y lo que queremos es dejar con javascript tan solo con el municipio que se nos pasa como parámetro:

Se puede hacer de muchas formas, con mas o menos lineas de código:

Necesitamos el valor y el texto que van a parecer en el desplegable / combo resultante, como solo nos pasan el valor tenemos que averiguar el texto, si es el que tenemos actualmente seleccionado lo tenemos facil:

var form = document.formulario;

var muni_text = form.municipio.options[f.municipio.options.selectedIndex].Text;

Si no es el que tenemos seleccionado y queremos averiguar el texto del valor que se nos pasa como parametro se me ocurre utilizar un bucle for:

//siendo id_muni el parametro que nos pasan del valor del desplegable
var tam_combo = form.municipio.length //tamaño del combo
for(i=0;i<tam_combo;i++)
{
if (form.municipio.options[i].value == id_muni)
{
var muni_text = form.municipio.options[i].text;
i = tam_combo; //obligamos la salida
}
}

Ya tenemos los valores resultantes de nuestro nuevo combo de tan solo un valor (id_muni y muni_text)
Ahora nos cargamos el desplegable / combo entero:

while (form.municipio.length > 0)
form.municipio.options[0] = null;

Si miraramos el tamaño del combo nos daria 0.

Ahora introducimos los valores al desplegable / combo quedando como resultado un desplegable de solo un valor:

form.municipio.options[0] = new Option (muni_text, id_muni );


Otra forma de hacerlo seria eliminar todos menos el que queremos que quede:

var i = 0;
while (form.municipio.length>1)
{
if (form.municipio.options[i].value != id_muni)
{
form.municipio.options[i] = null;
}
else
{
i=1;
}
}

Siempre eliminamos la primera opcion i=0 por eso cuando llegamos al valor que no queremos eliminar pasa a ser el primero y eliminamos los restantes i=1

Bueno de paso hemos dado un repasito a las opciones DOM del javascript para un combo, si se os ocurre otra forma de hacerlo se agredecera que lo dejeis en los comentarios, como todos sabeis no hay una unica forma de hacer las cosas, estan las buenas, las malas y las de cada uno :)


1 comentario:

  1. muy buenos codigos!!!!!
    con el material encontrado en tu blog he creado una empresa en internet y ya esta generando beneficio.
    un saludo!

    ResponderEliminar