Question

Have been looking around for a solution to this and have found some help on stack overflow but in most cases the examples I have found are not using arrays formed from a database query. Here is some code for what I am trying to achieve…

$stores = mysql_query("SELECT * FROM Stores");
$staff = mysql_query("SELECT * FROM Staff");

I would like to create two elements, one for stores and another for staff but I want to filter the staff based on the store client side. So if the user selects “Sydney” from the first dropdown, they are presented with only staff that work at the Sydney store in the second dropdown. Then if the user chooses “London” from the first dropdown, the Sydney staff are replaced by the London staff and so on.

My server side scripting is done with PHP and I am able to create the two dropdowns with PHP. But I am stuck on the jQuery to remove the I don’t want from the second dropdown.

I know this is possible, because I see it used all the time. I have seen lots of examples of how to manage this but none of the examples use data from the PHP array to insert the .

Answer 1

for the secondary drop down, yes, you’ll need some ajax.

You can create a script that go fetch the result coresponding to the store and send back the option listm witch is inserted in the ooption.

Using jquery and php you’ll need a few thing.

A php file to get the result and return the options. (let say getStaff.php)

<?php 
//get the store id by post is it is set
if (isset($_POST['store->id']) $store_id = mysqli_real_escape_string($_POST['store_id']);

//get the data !! notice the WHERE caluse
$r = mysql_query("SELECT * FROM Staff" *WHERE store=''$store->is*);

//split the data in the array
$staffs=array();
    while ($assoc = mysql_fetch_assoc($r)) {
          //Varialbe = $assoc['colum_name'];
          $staff->id=$assoc['id'];
         $staff->name=$assoc['name'];
        //and so on for each colum in your table.
        array_push($staffs, $assoc);
   }

//echo the result as option
foreach ($staffs as $staff) echo "<option value='$staff->id'>$staff->name</option>";
?>

In you first select, add

onchange="$.post('getStaff.php', {store_id:$(this).val()}, function (data){ $('#staff_select').html(data);});"

and add an id to your second select (staff_select) in this ecample.

As an explanation: When the 1st dropdown change, it send a request to getStaff.php with the store_id as a POST argument. The php sript get the syaff according to the store Id and bring back a list of option tags for your secondary select. Than jquery add the ‘data’ to your secondary select and VOilà!

Hope tih sis clear cause it’s a bunch of little thing together that will make it work. Sorry if it’s seems sloppy as an answer but it’s really simple once you know it.