I'm loading multiple items from a database using php. Each item has a 'category' attribute. I'm trying to run a jquery function, which loads a php script, for each iteration of an item. The script fetches all category options from the databse and populates a <select> object.

The reason for this roundabout method is that there is an option at the top of the page to add a new category. If a new category is added, I want to reload the above function for every item, so the new category is added to the <select>.

1. My php script 'loadCats.php' has the following:
3. select id="category" name="category">
4. <option value="">Select Category</option>
5. <?
6. while ($row = mysql_fetch_array($sql))
7. {
8. $val = $row['category'];
9. if ($cat != "")
10. $selected = $cat;
11. else
12. $selected = $_SESSION['category'];
13. ?>
14. <option value= "<? print $val ?>" <? if($selected == $val) print "selected" ?> ><? print $val; ?></option>
15. <?
16. }
17. ?>
18. </select>

the jquery function calling loadCats.php is as follows:

2.  <td align="left" valign="middle" id="displayCats">
3. 
   
4. <script>
5. $("#displayCats").each(function() {
6. loadCats();
7. });
8. function loadCats()
9. {
11. $('#displayCats').load('loadCats.php',{"cat":"<? print $row['category'] ?>"});
12. };
13. });
14. </script>
15. </td>

Only the last item has a drop down menu. The rest of the items have nothing.

Thanks