HTML y PHP : Formulario de seleccion de listas que muestra resultados.

Iniciado por Citrusl, 14 Mayo 2015, 16:29 PM

0 Miembros y 1 Visitante están viendo este tema.

Citrusl

Con HTML y PHP :

Necesito crear un formulario con una LISTA que me permita seleccionar una opción entre:

"Noroeste, Cuyo, Litoral, Centro, Noreste y Patagonia"

Al seleccinar una, me tiene que ofrecer otra LISTA:

"provincia1 , provincia2 ,provincia3 "

La selección se hace mediante un "SUBMIT"

Y mostrar en una página tanto la zona como la provincia seleccionada.

Nota: Soy novato usando html y php. Se cómo armar el html con la primera lista, pero nose como hacer para que se despliegue la seguna al seleccionar una opcion ni que hacer con el php. Alguna ayuda?


EFEX

Haber queres que muestre las provincias segun la region ? Te conviene hacerlo con javascript.. este es un ejemplo..

Código (javascript) [Seleccionar]

<!DOCTYPE HTML>
<html>

<head>
<meta charset="UTF-8" />
<style type="text/css">
/* Ocultamos la lista de Provincias por ahora.. */
select[name=Noroeste],
select[name=Cuyo],
select[name=Litoral],
select[name=Centro],
select[name=Noreste],
select[name=Patagonia] {
display: none;
}
</style>
<script type="text/javascript">
window.onload = function() {
var region = document.getElementById("selectRegion");
// Nuestro valor anterior de Regiones (Noroeste, Cuyo, etc)
var selectProvinciaBefore = region.value;
// Cuando seleccionemos una region hacemos lo siguiente
region.addEventListener("change", function() {
// Obtenemos el nombre
var selectRegion = this.value;
// y seleccionamos segun corresponda la Region(id)
var selectProvincia = document.getElementById(selectRegion);
// Seleccionamos la Provincia anterior seleccionada y la ocultamos
var hidePreviousElement = document.getElementById(selectProvinciaBefore);
if (hidePreviousElement) {
hidePreviousElement.style.display = 'none';
};
// Mostramos la lista de Provincias segun la Region correspondiente
selectProvincia.style.display = 'inline';
// Guardamos el nombre de la Region actual
selectProvinciaBefore = selectRegion;
});
};
</script>
</head>

<body>
<h1>Listas</h1>
<form>
<label>Elija region:</label>
<select list="region" id="selectRegion">
<option selected="selected"></option>
<option value="Noroeste">Noroeste</option>
<option value="Cuyo">Cuyo</option>
<option value="Litoral">Litoral</option>
<option value="Centro">Centro</option>
<option value="Noreste">Noreste</option>
<option value="Patagonia">Patagonia</option>
</select>
<label>Elija Provincia:</label>
<select name="Noroeste" id="Noroeste">
<option value="provincia1">provincia1Noroeste</option>
<option value="provincia2">provincia2Noroeste</option>
<option value="provincia3">provincia3Noroeste</option>
</select>

<select name="Cuyo" id="Cuyo">
<option value="provincia1">provincia1Cuyo</option>
<option value="provincia2">provincia2Cuyo</option>
<option value="provincia3">provincia3Cuyo</option>
</select>

<select name="Litoral" id="Litoral">
<option value="provincia1">provincia1Litoral</option>
<option value="provincia2">provincia2Litoral</option>
<option value="provincia3">provincia3Litoral</option>
</select>

<select name="Centro" id="Centro">
<option value="provincia1">provincia1Centro</option>
<option value="provincia2">provincia2Centro</option>
<option value="provincia3">provincia3Centro</option>
</select>

<select name="Noreste" id="Noreste">
<option value="provincia1">provincia1Noreste</option>
<option value="provincia2">provincia2Noreste</option>
<option value="provincia3">provincia3Noreste</option>
</select>

<select name="Patagonia" id="Patagonia">
<option value="provincia1">provincia1Patagonia</option>
<option value="provincia2">provincia2Patagonia</option>
<option value="provincia3">provincia3Patagonia</option>
</select>
</form>
</body>

</html>
GITHUB