A través del siguiente script vamos a crear un formulario con campos de selección dinámicos; es decir, dependiendo de la selección que hagamos en el primer campo se nos mostrarán unas u otras opciones en el segundo campo.
En nuestro ejemplo, hemos creado un formulario donde el usuario tendrá que seleccionar entre Coche o Moto y dependiendo de su selección se le mostrarán marcas de uno u otro tipo.
El script:
<script type="text/javascript"> function cargarMarca(valor) { var arrayValores=new Array( new Array("Coche","Marca coche 1","Marca coche 1"), new Array("Coche","Marca coche 2","Marca coche 2"), new Array("Coche","Marca coche 3","Marca coche 3"), new Array("Moto","Marca moto 1","Marca moto 1"), new Array("Moto","Marca moto 2","Marca moto 2"), new Array("Moto","Marca moto 3","Marca moto 3") ); if(valor==0) { document.getElementById("marca").disabled=true; }else{ document.getElementById("marca").options.length=0; document.getElementById("marca").options[0]=new Option("Seleccione...", "0"); for(i=0;i<arrayValores.length;i++) { if(arrayValores[i][0]==valor) { document.getElementById("marca").options[document.getElementById("marca").options.length]=new Option(arrayValores[i][2], arrayValores[i][1]); } } document.getElementById("marca").disabled=false; } } function seleccionado_Marca(value) { var v1 = document.getElementById("tipo"); var valor1 = v1.options[v1.selectedIndex].value; var text1 = v1.options[v1.selectedIndex].text; var v2 = document.getElementById("marca"); var valor2 = v2.options[v2.selectedIndex].value; var text2 = v2.options[v2.selectedIndex].text; } </script>
El primer campo (Tipo de vehículo) tendrá la siguiente forma:
<select id='tipo' onchange='cargarMarca(this.value);'> <option value='0'>Seleccione...</option> <option value='Coche'>Coche</option> <option value='Moto'>Moto</option> </select>
El segundo campo (Marca) quedará así:
<select disabled="disabled" id='marca' onchange='seleccionado_Marca();'> <option value='0'>Seleccione...</option> </select>
Puedes descargarte un ejemplo haciendo clic aquí.
Para cualquier consulta no dudes en dejar tu comentario o envíanos un email a través del formulario de contacto.