Opciones de un combo en un función de otro

Escrito por J.F. el Jueves, 12 de Julio del 2007 a las 16:04

Siguiendo con Javascript (ultimamente hablo mucho sobre él), vamos a ver como podemos cambiar las opciones de un combo en función de la opción elegida en otro combo. Muy interesante por ejemplo para mostrar un combo donde ponga: "Elija país" y en función del país elegido cargar sus ciudades correspondientes. Veamos el código que debemos incluir en el head:

TEXTO PLANO

JavaScript:

1. <script language="JavaScript">
2.  
3.    function addOpt(oCntrl, iPos, sTxt, sVal){
4.      var selOpcion=new Option(sTxt, sVal);
5.      eval(oCntrl.options[iPos]=selOpcion);
6.    }
7.  
8.    function cambia(oCntrl){
9.     while (oCntrl.length) oCntrl.remove(0);
10.     switch (document.frm.pais.selectedIndex){
11.      case 0:
12.       addOpt(oCntrl,  0, "Ciudad de México", "0");
13.       addOpt(oCntrl,  1, "Monterrey", "1");
14.       addOpt(oCntrl,  2, "Guadalajara", "2");
15.       break;
16.      case 1:
17.       addOpt(oCntrl,  0, "Madrid", "0");
18.       addOpt(oCntrl,  1, "Barcelona", "1");
19.       addOpt(oCntrl,  2, "San Sebastián", "2");
20.       break;
21.      case 2:
22.       addOpt(oCntrl,  0, "Caracas", "0");
23.       addOpt(oCntrl,  1, "Coro", "1");
24.       addOpt(oCntrl,  2, "Maracay", "2");
25.       addOpt(oCntrl,  3, "Valencia", "3");
26.       break;
27.     }
28.    }
29.   </script>
30.  </head>

Lo que realmente es necesario explicar y es interesante es la parte del switch, en la cual declaramos las opciones que se mostrarán en función del valor pasado del anterior combo (en el que se elige país). Viendo la parte HTML queda más claro:

TEXTO PLANO

HTML:

1. <form name="frm">
2.    <table border="0">
3.     <tr>
4.      <td>
5.       Pais
6.      </td>
7.      <td>
8.       <select name="pais" onchange="cambia(document.frm.ciudad)">
9.        <option value="Mex">Mexico</option>
10.        <option value="Esp">España</option>
11.        <option value="Ven">Venezuela</option>
12.       </select>
13.      </td>
14.      <td>
15.       &nbsp;
16.      </td>
17.      <td>
18.       Ciudad
19.      </td>
20.      <td>
21.       <select name="ciudad">
22.        <option value="0">Ciudad de México</option>
23.        <option value="1">Monterrey</option>
24.        <option value="2">Guadalajara</option>
25.       </select>
26.      </td>
27.     </tr>
28.    </table>
29.   </form>
30.  </body>

De ésta manera podremos cambiar las opciones de un combo dependiendo del valor de otro combo. Puedes modificar el ejemplo y adaptarlo a tus necesidades.
Vía: | Foros del Web | Ejemplo |

Categoria: Javascript

• Añadir este post a
• Del.icio.us -
• Meneame -
• Digg -
• Webeame

Entradas relacionadas

Deja un comentario

Nombre (obligado)

E-mail (no sera publicado) (obligado)

Pagina web

Puedes usar las siguientes etiquetas HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>