En este art\u00edculo vamos a ilustrar como tener un combo o selector que tras cambiar de opci\u00f3n se muestra un contenido u otro.<\/p>\n
En el ejemplo que vamos a detallar, los contenidos que pretendemos mostrar son formularios. Se tratar\u00eda de que si el usuario elige una de las opciones: estudiantes, trabajador, aut\u00f3nomo o en paro mostramos un formulario u otro.<\/p>\n
Como tenemos 4 combos en el selector principal, necesitaremos tener 4 contenedores escondidos.<\/p>\n
Para mostrar el formulario que toca seg\u00fan la opci\u00f3n escogida, hemos creado la siguiente funci\u00f3n jQuery que deberemos incluir junto con la librer\u00eda jQuery en nuestro <head>:<\/p>\n
<script type=\"text\/javascript\" src=\"js\/jquery.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\nfunction mostrar(id) {\r\n\u00a0\u00a0 \u00a0if (id == \"estudiante\") {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(\"#estudiante\").show();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(\"#trabajador\").hide();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(\"#autonomo\").hide();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(\"#paro\").hide();\r\n\u00a0\u00a0 \u00a0}\r\n\r\n\u00a0\u00a0 \u00a0if (id == \"trabajador\") {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(\"#estudiante\").hide();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(\"#trabajador\").show();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(\"#autonomo\").hide();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(\"#paro\").hide();\r\n\u00a0\u00a0 \u00a0}\r\n\r\n\u00a0\u00a0 \u00a0if (id == \"autonomo\") {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(\"#estudiante\").hide();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(\"#trabajador\").hide();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(\"#autonomo\").show();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(\"#paro\").hide();\r\n\u00a0\u00a0 \u00a0}\r\n\r\n\u00a0\u00a0 \u00a0if (id == \"paro\") {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(\"#estudiante\").hide();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(\"#trabajador\").hide();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(\"#autonomo\").hide();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(\"#paro\").show();\r\n\u00a0\u00a0 \u00a0}\r\n}\r\n<\/script><\/pre>\nSi nos fijamos, a la funci\u00f3n mostrar(id) le estamos pasando un par\u00e1metro que no es m\u00e1s que la id de la opci\u00f3n escogida.<\/p>\n
Seg\u00fan la opci\u00f3n escogida, dentro de la funci\u00f3n miramos de mostrar lo que toque y ocultar el resto.<\/p>\n
En nuestro <body> tendremos 4 contenedores ocultos como el siguiente:<\/p>\n
<div id=\"estudiante\" style=\"display: none;\">\r\n\u00a0\u00a0 \u00a0<h2>Si eres estudiante...<\/h2>\r\n\u00a0\u00a0\u00a0 <form action=\"index.php\" method=\"post\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<p>Nombre:<br\/>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<input type=\"text\" name=\"nombre\" \/><\/p>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <p>Centro:<br\/>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<input type=\"text\" name=\"centro\" \/><\/p>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"submit\" name=\"send\" value=\"Enviar\" \/>\r\n\u00a0\u00a0\u00a0 <\/form>\r\n<\/div><\/pre>\nY tambi\u00e9n tendremos un formulario principal el cual contiene el combo con las opciones a escoger:<\/p>\n
<form action=\"index.php\" method=\"post\">\r\n\u00a0\u00a0 \u00a0Estado actual: \r\n\u00a0\u00a0\u00a0 <select id=\"status\" name=\"status\" onChange=\"mostrar(this.value);\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <option value=\"estudiante\">Estudiante<\/option>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <option value=\"trabajador\">Trabajador<\/option>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <option value=\"autonomo\">Aut\u00f3nomo<\/option>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <option value=\"paro\">En el paro<\/option>\r\n\u00a0\u00a0\u00a0\u00a0 <\/select>\r\n<\/form><\/pre>\nY con todo esto ya tendr\u00edamos la funcionalidad que se pretende con este art\u00edculo.<\/p>\n