Cómo crear un formulario con campos de selección dinámicos

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.

neo 2.0 - Cómo crear un formulario con campos de selección dinámicos

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.

2 comentarios:

  1. Francisco Gomez:
    Este codigo puede enviar el valor del select (que deberia de estar en un formulario) por metodo POST a una bd?
    gracias de antemano

    ResponderEliminar
    Respuestas
    1. Hola Francisco; la respuesta a tu pregunta es Sí. El valor que carga dinámicamente a través de la función JavaScript se enviará a través de POST siempre que tengas establecido este método de envío en tu formulario y se grabará en la BBDD. Saludos!

      Eliminar

Entradas populares

Sobre el autor

Mi foto

Me llamo Juan Ignacio Estévez. Soy técnico publicitario por el Centro Español de Nuevas Profesiones (CENP).

Comencé desarrollando mi carrera profesional en estudios de diseño y agencias de publicidad como director de arte, siempre enfocado al mundo Offline. Sin embargo, pronto sentí curiosidad por el Online. Desde entonces, he intentado formarme en este sector, a través de diferentes cursos de formación y de forma autodidacta.

Puedes ver mi perfil completo en LinkedIn. ¿Hacemos Networking?