best way to build dyanmic pop up menus

Question

I have a scheduling page that display a week (sunday to saturday) schedule.

They way I want to add employees to this schedule is with a series of popup menus that change based on the values selected.

For example the first menu will be Jobs with <option> values propagated from the jobs table in my db.

Now say a user selects 'Cook' in the Jobs popup menu. The next menu 'Employees' will show all the employees from the employees table that have the job code of 'cook' set. Thus showing me all the cooks that would be available that day.

What is the best way to make a series of menus like this?

Any links to quality tutorials would be appreciated.

Answer 1

You can do this using Javascript/AJAX. The user chooses one option from the first menu, and the next menu automatically updates the options with a request to the server sending the option chosen on the first menu.

This could be done the following way with jQuery, which I highly recommend to avoid different browser issues. This is incomplete but should give you a big head start:

HTML

<select id='jobs_menu' name='job'>
    <option>Cook</option>
    <option>Waiter</option>
</select>

<select id='employees_menu' name='employees'>
    <option>John Doe</option>
    <option>Doe John</option>
    <option>Everyone else</option>
</select>

Javascript / jQuery

$(document).ready(function(){

    $('#jobs_menu').change (function () {

        //ajax call
        $.get('http://yourscript.com/script.php', { job: $('#jobs_menu').val() },      
            function () {
                //parse the json and fill the #employees_menu with the results
            });
    });    
});

PHP

if (isset ($_GET['job']))
{
    $names  = array ();
    $job = mysql_real_escape_string ($_GET['job']);
    $res = mysql_query ("SELECT name FROM Employees WHERE job='$job'");

    while ($row = mysql_fetch_assoc ($res))
    {
        $names[] = $row['name']; 
    }

    echo json_encode ($names);
}