Update contents of SQL-driven dropdown menu based on another dropdown selection- AJAX


I have an HTML dropdown menu:

<select id="team" name="team">
<option value="GBR">Great Britain</option>
<option value="USA">United States of America</option>
<option value="CAN">Canada</option>

I also have a second dropdown menu which has values generated from the following SQL:


$res = sqlsrv_query(
    "SELECT ID, Country, ISOCode FROM Country WHERE ISOCode = ?" // dynamically get value from team dropdown menu each time

while($row = sqlsrv_fetch_array($res)) { ?>
<option value="<?php echo $row['ID']; ?>"><?php echo $row['ID']; ?></option>

What I’d like to do is every time I change the Team dropdown selection, it auto updates the 2nd Dropdown based on the Country abbreviation in the Team dropdown.
So each time I change the Country in the Team dropdown, a whole new set of SQL results appear in the 2nd dropdown.

Can someone show me how this would be done?

I presume I would be using some AJAX but I’m not totally sure where to begin with this.

On the site I’m building I am using jQuery.

Many thanks for any pointers.

The method you seek is normally termed linked selects or linked dropdowns or similar, with that and ajax and jquery you should be able to find a tutorial.

ps should that be :

<option value="<?php echo $row['ID']; ?>"><?php echo $row['Country']; ?></option>

Hey Cups, wow it’s been a while since I was last here :slight_smile:

Dug out an olde AJAX book at this end and found something almost identical so going to use that.

Anthony’s helped me lately connecting .NET sessions to PHP. Crazy complexity.