bueno esto es un ejmplo podrias volverlo dinamico ya sea realizando
conexiones a la base de datos , haciendo condiciones y podrias usar
json para devolver los datos
claro que para usar json se tendria que a ver solicitado desde jquery
que vas ah retornar unn objeto json
ejemplo
Código:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Demo de listas desplegables dependientes accesibles</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// quita el boton si tiene javascript
// otra opción es añadir una clase que oculte el boton por CSS
$("#recarga").remove();
});
// si cambia la primera lista "ctljob" ejecuta SELECT.PHP que devuelve los datos en formato JSON
// y rellena con esos datos la lista dependiente "ctlPerson"
$(function(){
$("select#ctljob").change(function(){
$.getJSON("select.php",{id: $(this).val()}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
}
$("#ctlPerson").html(options);
$('#ctlPerson option:first').attr('selected', 'selected');
})
})
})
</script>
</head>
<body>
<h1>Demo de listas desplegables dependientes accesibles</h1>
<p>Volver al artículo explicativo: <a href="../listas-dependientes-accesibles-jquery.php">listas desplegables dependientes accesibles con jquery</a></p>
<form name="form1" id="form1" method="post" action="/listas/index.php">
<p>Selecciona un dato de la primera lista desplegable.</p>
<p><label for="ctljob">Categoría: <select id="ctljob" name="ctljob">
<option value="0">Selecciona</option>
<option value="1">Jefes</option>
<option value="2">Desarrolladores</option>
<option value="3">Diseñadores</option>
</select></label>
<input type="submit" name="recarga" id="recarga" value="Carga personas" /></p>
<p><label for="ctlPerson">Personas: <select id="ctlPerson">
<option value="0">Selecciona</option>
</select></label></p>
<input type="submit" name="postback" id="postback" value="Enviar" />
</form>
<p></p>
</body>
</html>
en el archivo php
Código:
<?php
$txtMensaje = "";
$txtIdCategoria = "0";
if (isset($_POST["recarga"])) {
// realiza el rellenado del selector de personas
$txtIdCategoria = $_POST["ctljob"];
// muestra un mensaje de aviso
$txtMensaje = "Ha seleccionado: " . $txtIdCategoria;
}
if (isset($_POST["postback"])) {
$txtMensaje = "Formulario enviado.";
// realiza el proceso con todos los datos del formulario
}
function getIndividual($id) {
// rellena la lista dependiente de acuerdo con el valor que recibe de parametro
// esto se puede sustituir facilmente por un acceso a base de datos
if ($id == 0) {
$names = array('0' => 'Selecciona');
} else if ($id == 1) {
$names = array('1' => 'Antonio', '2' => 'Pedro', '3' => 'Carlos');
} else if ($id == 2) {
$names = array('11' => 'Oscar', '12' => 'Raquel', '13' => 'Ainara');
} else if ($id == 3) {
$names = array('21' => 'Francisco', '22' => 'Rosa');
}
return $names;
}