accesoweb : Mensaje: Listas desplegables dependientes con jquery accesibles

Partiendo del código desarrollado por Remy [1] he desarrollado este script
en PHP junto con Jquery crea dos listas desplegables dependientes. Aunque
aun hay que pulir varias cosas en el código (label,…) creo que se puede
considerar accesible.

Básicamente si el javascript esta desactivado muestra un botón que permite
recargar la página para que se rellene la segunda lista dependiendo del dato
seleccionado en la primera.

Aquí tenéis el código de los 2 archivos que he creado y que se deben unir a
la última versión de jquery [2]

Espero vuestras críticas y consejos antes de publicarlo como ejemplo.

Un saludo y gracias.

****************************
ARCHIVO demo2.php

<?php

$txtMensaje = "";
$txtIdCategoria = "0";

if (isset($_POST["recarga"])) {
// realiza el rellenado del selector de personas
$txtIdCategoria = $_POST["ctljob"];

$txtMensaje = "Ha seleccionado: " . $txtIdCategoria;
}

if (isset($_POST["postback"])) {
$txtMensaje = "Formulario enviado.";

// realiza el proceso con todos los datos del formulario
}

function getIndividual($id) {

// 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' => 'Mark', '2' => 'Andy', '3' =>
'Richard');
} else if ($id == 2) {
$names = array('11' => 'Remy', '12' => 'Arif', '13' =>
'JC');
} else if ($id == 3) {
$names = array('21' => 'Aidan', '22' => 'Henry');
}

return $names;
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;
charset=utf-8">
<title>Demo 2</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 ¿que es mejor
añadir una clase de css (probar)?
$("#recarga").remove();
});

$(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>
<form name="form1" id="form1" method="post" action="<?php
echo $_SERVER['PHP_SELF']; ?>">
<p>Intento de mejorar la version 1 controlando si
existe o no javascript.</p>

<p>Categoría: <select id="ctljob" name="ctljob">
<option value="0">Selecciona</option>
<option value="1">Manager</option>
<option value="2">Lead Dev</option>
<option value="3">Developer</option>
</select>

<input type="submit" name="recarga" id="recarga"
value="Carga personas" /></p>

<p>Personas: <select id="ctlPerson">
<?php
foreach (getIndividual($txtIdCategoria) as $id => $name) {
echo "<option value=\"" . $id . "\">" . $name .
"</option>\n";
}
?>
</select></p>

<input type="submit" name="postback" id="postback"
value="Enviar" />
</form>

<p><?php echo $txtMensaje; ?></p>
</body>
</html>

****************************
ARCHIVO select.php

<?php

// esto se puede sustituir facilmente por un acceso a base de datos

if ($_GET['id'] == 0) {
echo <<<HERE_DOC
[{optionValue: 0, optionDisplay: 'Selecciona'}]
HERE_DOC;
} else if ($_GET['id'] == 1) {
echo <<<HERE_DOC
[{optionValue:1, optionDisplay: 'Mark'}, {optionValue:2, optionDisplay:
'Andy'}, {optionValue:3, optionDisplay: 'Richard'}]
HERE_DOC;
} else if ($_GET['id'] == 2) {
echo <<<HERE_DOC
[{optionValue:11, optionDisplay: 'Remy'}, {optionValue:12, optionDisplay:
'Arif'}, {optionValue:13, optionDisplay: 'JC'}]
HERE_DOC;
} else if ($_GET['id'] == 3) {
echo <<<HERE_DOC
[{optionValue:21, optionDisplay: 'Aidan'}, {optionValue:22,
optionDisplay:'Russell'}]
HERE_DOC;
}

?>

****************************

[1]
http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-aj
ax/
[2]
http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.1.pack.js

Oscar Linares
oscar@...
http://www.eideo.com
Tlf. 958 124 517
----------------------------------------------------
Internet es positivo porque nos une, nos conecta...
Trabajando en EIDEO para alcanzar una Web más universal.
Aprendiendo en http://www.innovacionweb.com

Consejos de Yahoo! Grupos

¿Sabías que...?

Mensajes