Usar DynamicOptionList

marcospuig · #1 (**permalink**) 17/05/2007, 10:23

Hola

¿Habéis usado alguna vez un DynamicOptionList? (más información en http://www.javascripttoolbox.com/lib...list/index.php)

Pues yo estoy en ello pero tengo una duda que no consigo resolver, y llevo ya tiempo con esto. A ver yo tengo 3 select, y 2 de ellos dependen del valor del primero, de manera que cuando el usuario elija una opción en el primer select en los otros 2 que son dependientes de éste se actualicen con las opciones que se pueden elegir con esa opción que elijió el usuario en el primer select, ¿entendeis?.

Os ilustro con ejemplos:

Por ejemplo: dependiendo del sexo se podrá elegir un nombre u otro y un apellido u otro (el nombre y los apellidos dependen del sexo):

Código HTML:

<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script type="text/javascript" src="dynamicoptionlist.js"></script>
<script type="text/javascript">

var namesSex = new DynamicOptionList();
namesSex.addDependentFields("sex","names");

namesSex.forValue("boy").addOptions("Matt","Bob","Joe","Bill","John");
namesSex.forValue("girl").addOptions("Jane","Angie","Jennifer","Amy","Sue");

namesSex.selectFirstOption = false;
</script>


<body onLoad="initDynamicOptionLists()">
<form name="form1" action="" method="get">


Sexo: <select name="sex">
<option selected="selected" value="boy">boy</option>
<option value="girl">girl</option>
</select>

Nombres: <select name="names">
<script type="text/javascript">namesSex.printOptions("names")</script>
</select>




<script type="text/javascript">

var apellidoSex = new DynamicOptionList();
apellidoSex.addDependentFields("sex1","apellidos");

apellidoSex.forValue("boy").addOptions("apellido1","apellido2");
apellidoSex.forValue("girl").addOptions("apellido3","Apellido4");

apellidoSex.selectFirstOption = false;
</script>

Sexo 2º: <select name="sex1">
<option selected="selected" value="boy">boy</option>
<option value="girl">girl</option>
</select>



Apellidos: <select name="apellidos">
<script type="text/javascript">apellidoSex.printOptions("apellidos")</script>
</select>

</form>
</body>
</html>

De esta manera me funciona, pero no es lo que quiero, porque aquí en sexo aparecería 2 veces (sex y sex1), pero yo quiero que aparezca sólo 1 vez:

Código HTML:

<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script type="text/javascript" src="dynamicoptionlist.js"></script>
<script type="text/javascript">

var namesSex = new DynamicOptionList();
namesSex.addDependentFields("sex","names");

namesSex.forValue("boy").addOptions("Matt","Bob","Joe","Bill","John");
namesSex.forValue("girl").addOptions("Jane","Angie","Jennifer","Amy","Sue");

namesSex.selectFirstOption = false;
</script>


<body onLoad="initDynamicOptionLists()">
<form name="form1" action="" method="get">


Sexo: <select name="sex">
<option selected="selected" value="boy">boy</option>
<option value="girl">girl</option>
</select>

Nombres: <select name="names">
<script type="text/javascript">namesSex.printOptions("names")</script>
</select>




<script type="text/javascript">

var apellidoSex = new DynamicOptionList();
apellidoSex.addDependentFields("sex","apellidos");

apellidoSex.forValue("boy").addOptions("apellido1","apellido2");
apellidoSex.forValue("girl").addOptions("apellido3","Apellido4");

apellidoSex.selectFirstOption = false;
</script>

Apellidos: <select name="apellidos">
<script type="text/javascript">apellidoSex.printOptions("apellidos")</script>
</select>

</form>
</body>
</html>

Y quiero hacerlo usando los DynamicOptionList, pero es que no hay manera, llevo ya 1 semana estancado aqui y no hay manera....si me pudiérais ayudar os lo agradecería.

Muchas gracias.