[Javaescript] Listas desplegables con jquery accesibles

Mie Oct 3 01:14:46 PDT 2007

Partiendo del código desarrollado por Remy [1] he desarrollado este script
en PHP junto con Jquery crea dos listas desplegables dependientes. Aunque
aún 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 publicarlos como ejemplo. Voy a
mandar una copia de este mensaje a la lista AccWeb.

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 en eideo.com
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