
<?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;

}



?>

<!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 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="<?php echo $_SERVER['PHP_SELF']; ?>">

            <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">

<?php

    // rellena la lista dependiente

    // este paso se ejecuta al entrar la primera vez y si no tenemos javascript activado y pulsamos en "Carga personas"

    foreach (getIndividual($txtIdCategoria) as $id => $name) {

        echo "<option value=\"" . $id . "\">" . $name . "</option>\n";

    }

?>

            </select></label></p>

            

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

        </form>

        

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

    </body>

</html>