Añadir/Eliminar elementos lista desplegable

Tengo una forma con dos listas desplegables (<select>) y dependiendo del valor seleccionado en la primera lista, se mostrarán los elementos relacionados en la segunda lista.
NOTA: No siempre el número de opciones para la segunda lista es el mismo, quiero decir: Si seleccionamos la opción 1 de la primera lista, la segunda deberá llenarse con 3 elementos; si seleccionamos la opción 2, aparecerán 6 elementos; si seleccionamos la opción 3, no aparecerá ningún elemento, etc...

2 Respuestas

Respuesta
1
Hay varias formas de hacerlo, para mí, una de las mejores es mediante matrices. Te pego un ejemplo a continuación, en caso de duda o problema, ya sabes :)
Ah, este código lo he probado con 3 listas enlazadas de más de 2000 elementos :) así que no t preocupes por problemas de rendimiento :)
----------------------------------------
<script>
<!--
var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group=new Array()
group[0][0]=new Option("Website Abstraction","http://wsabstract.com")
group[0][1]=new Option("News.com","http://www.news.com")
group[0][2]=new Option("Wired News","http://www.wired.com")
group[1][0]=new Option("CNN","http://www.cnn.com")
group[1][1]=new Option("ABC News","http://www.abcnews.com")
group[2][0]=new Option("Hotbot","http://www.hotbot.com")
group[2][1]=new Option("Infoseek","http://www.infoseek.com")
group[2][2]=new Option("Excite","http://www.excite.com")
group[2][3]=new Option("Lycos","http://www.lycos.com")
var temp=document.doublecombo.stage2
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options=new Option(group[x].text,group[x].value)
}
temp.options[0].selected=true
}
function go(){
location=temp.options[temp.selectedIndex].value
}
//-->
</script>
<form name="doublecombo">
<p><select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option>Technology Sites</option>
<option>News Sites</option>
<option>Search Engines</option>
</select>
<select name="stage2" size="1">
<option value="http://wsabstract.com">Website Abstraction</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.wired.com">Wired News</option>
</select>
<input type="button" name="test" value="Go!"
onClick="go()">
</p>
</form>
Respuesta
1
Te adjunto el código.. Pruébalo, y me dices. SI necesitas que te explique que hace CADA FUNCIÓN, puedes enviar otra pregunta.. ¿te parece?
La idea es la siguiente: cuando alguien ENFOCA, o CAMBIA o SALE del select denominado campo, se activa una función:HaceCambio, esta función EVALÚA EL CÓDIGO (eval) del parámetro pasado, y luego llama a otra función: Cambiar Valores.
Bueno... si necesitas más ayuda, me tienes al tanto.
Suerte.
<html>
<head>
<title>Cambiador</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
var Jugos = new Array("Seleccione...", "Naranja", "Pomelo", "Manzana", "Mango");
var JugosX = new Array("", "01001", "01002", "01003", "01004");
var Vinos = new Array("Seleccione...", "Cavernet", "Sauvignon", "Chenin");
var VinosX = new Array("", "02001", "02002", "02003");
var Aguas = new Array("Seleccione...", "Agua", "Soda");
var AguasX = new Array("", "03001", "03002");
function HaceCambio(que_array, que_valores)
{
var el_array = eval(que_array);
var los_valores = eval(que_valores);
cambiarDatos(window.document.datos.articulos, el_array, los_valores);
window.document.datos.articulos.selectedIndex=0;
}
function cambiarDatos(elCampo, el_array, los_valores)
{
elCampo.options.length = el_array.length;
for (loop=0; loop < el_array.length; loop++)
{
elCampo.options[loop].text = el_array[loop];
elCampo.options[loop].value = los_valores[loop];
}
}
//-->
</script>
<form name="datos" action="yo.htm" method="post">
Tipo:
<select name="campo" size="1" onChange="HaceCambio(window.document.datos.campo.options[selectedIndex].text, window.document.datos.campo.options[selectedIndex].value);" onBlur="HaceCambio(window.document.datos.campo.options[selectedIndex].text, window.document.datos.campo.options[selectedIndex].value);" onFocus="HaceCambio(window.document.datos.campo.options[selectedIndex].text, window.document.datos.campo.options[selectedIndex].value);">
<option value="JugosX">Jugos</option>
<option value="VinosX">Vinos</option>
<option value="AguasX">Aguas</option>
</select>
Artículo:
<select name="articulos" size="1">
<option value="Seleccione..." selected>Seleccione...</option>
<option value="01001">Naranja</option>
<option value="01002">Pomelo</option>
<option value="01003">Manzana</option>
<option value="01004">Mango</option>
</select>
</form>
</body>
</html>
Saludos . . Pablo.

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas

Combos dinamicos + MySql

Que ni siquiera se si tiene solución. Paso a explicar. Tengo 2 combos (drop-down menu), y tanto los datos del primero como del segundo se deben tomar desde una base de datos MySQL corriendo en el servidor. Tanto el primer combo como el segundo se...
1 respuesta

Combobox dinámico y ASP

Estoy trabajando dos combobox, el segundo se genera dinámicamente de acuerdo a lo seleccionado en el primero, pero tengo problemas al guardar lo del segundo combo en una base de datos mediante ASP, ya que guarda nada, al parecer un NULO, ¿Podrías...
1 respuesta

Vincular valor de lista desplegable

Necesito que al seleccionar un elemento (nombre) de una lista desplegable, en la celda de al lado aparezca un valor relacionado a dicho nombre. E.g. Si de la lista escojo un acero, que aparezca el valor de su dureza.
1 respuesta

Combos dependientes

Te describo mi situación: 1.- Tengo Dos combos, el combo1, contiene las fases, esta relacionadao con la tabla Fases, y me muestra la lista de fases que se encuentran el la base de datos 2-. El combo 2 deben aparecer las Subfases, de la tabla...
1 respuesta

Menu desplegable en director 9

Mi pregunta es como se puede hacer y si es posible un menu desplegable al pasar con el ratón por encima de una zona (más o menos como menu de windows)se abre a la derecha una lista de submenus y elegimos el que queremos.
2 respuestas

Listas: validación y fórmulas

Tengo problemas al momento de querer validar una celda con listas despegables que dependan del valor de otra celda, es decir, si quiero que en la celda B1 se despliegue la lista "X" cuando el valor de A1 es "W" y la lista "Y" cuando el valor de A1 es...
2 respuestas

Quiero utilizar la función sumar si conjunto pero vincularla a listas desplegables

Quiero utilizar la función sumar si conjunto pero vincularla a listas desplegables, ejemplo de los datos que quiero utilizar son clientes: aaa, bbb, ccc, ddd; código de producto: 123,456; y cantidades de los productos que se despachan
1 respuesta

Como crear un menu desplegable en excel 2007

La idea es poder crear un menu principal, el cual abra archivos de excel; en un submenú abra hojas de esos archivos. En general pueda controlar (abrir y cerrar básicamente por medio de este menu ubicado en archivo específico).
1 respuesta

Select Dependientes

En un solo formulario existen dos SELECT. El primero tiene la lista de países y el otro debe contener las ciudades del país que se seleccione en el primer SELECT solo que no lo puedo hacer o sea actualizar al segundo SELECT de acuerdo con la opción...
1 respuesta

Capturar pantalla

Esoy intentado una captura de pantalla y no hay manera, pulso la tecla lmpr pa de mi teclado portátil abro el paint o el word voy a seleccionar la opción pegar y nada que en el desplegable la palabra pegar esta en gris. Después de esto.. Busco la...
4 respuestas