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

PHP
1

Hi,

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>
</select>

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

<?php

$res = sqlsrv_query(
$conn,
    "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>
<?php
}
?>

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.

2

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>
3

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.

4