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

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.

Publicar un comentario

4 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
  2. gracias por el aporte, estoy en proceso de aprendizaje, no tienes por casualidad un video o un post explicando el código por ejemplo, new Array("Coche","Marca coche 1","Marca coche 1"), que es el primer valor de larray, o el segundo, etc, porque se repite Marca coche 1 dos veces dentro del array?

    ResponderEliminar
  3. Hola, gracias por visitar el blog y dejar tu comentario. Lamentablemente no tengo un vídeo explicando el código pero si puedes descargar el código para poder hacer pruebas.

    Si te fijas tenemos por un lado el campo Select "Tipo" con Coche y Moto, y dependiendo de la selección que hagas, te carga en el siguiente campo Select las marcas de coche o moto según corresponda, de ahí que se repiten por cada una de las marcas que quieras añadir para cada uno de esos grupos.

    Como te comentaba puedes descargar el código y modificarlo por lo que necesites:

    https://www.dropbox.com/s/2n89u14p6bbxjzx/formulario-dinamico.rar

    ResponderEliminar