The best way to create dyanmic popup menus
I have a scheduling page that displays a graph of the week (Sunday to Saturday).
In this case, I want to add employees to this schedule with a series of pop-up menus that change based on the selected values.
For example, the first menu will be jobs with <option>
values propagated from the jobs table in my db.
Now tell the user that the user chooses "Cook" from the Jobs pop-up menu. The next menu "Employees" will show all employees from the table of employees who have the job code "cook". Thus, showing me all the chefs that will be available that day.
What is the best way to make a series of such menus?
Any links to quality guides would be appreciated.
source to share
You can do this using Javascript / AJAX. The user selects one option from the first menu, and the next menu automatically updates the options with a request to the server sending the option selected in the first menu.
It can be done as follows with jQuery, which I highly recommend avoiding various browser issues. It's incomplete, but should give you a 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);
}
source to share