Dependent dropdown not showing any results

JavaScript
1

I am using the following function to populate a list with provinces depending on the country:


$(document).ready(function(){
	$("select#countries").change(function(){
		var country_id = $("select#countries option:selected").attr('value');
		$("#province").html( "" );
		if (country_id.length > 0 ) {
			$.ajax({
				type: "POST",
				url: "provinces.php",
				data: "country_id="+country_id,
				cache: false,
				beforeSend: function () {
					$('#province').html('<img src="loader.gif" alt="" width="24" height="24">');
				},
				success: function(html) {
					$("#province").html( html );
                }
            });
        }
      });
    });

This is the dropdown:


<select name="countries" id= "countries">
    <option value="">Make a choice</option>
           <?php 
               $qryCountries = $pdo->query(" SELECT * FROM countries");
               $qryCountries->setFetchMode(PDO::FETCH_ASSOC);
               while($row = $qryCountries->fetch()) {?>
                   <option value="<?php echo $row['country_id']; ?>"><?php echo $row['country']; ?></option>    
               <?php
               }
            ?>
    </select>
        <label>Sub Category</label>
    <select name="province" id="province"></select>

And this is what I have in provinces.php


  $country_id=$_POST["country_id"];
  
  $gryProvinces = $pdo->query(" SELECT province_id, province FROM provinces WHERE country_id = '$country_id'");
  $gryProvinces->setFetchMode(PDO::FETCH_ASSOC);
  
  while($row = $gryProvinces->fetch()) {
	  echo"<option value=$row[province_id]>$row[province]</option>";
	  
  }

But Like I said the province select is not returning any results when changing country. Does anyone see what is wrong in my code? Thank you in advance

2

A local test that I’ve performed with your code works well.

Do you have the jQuery library loaded? If so, then there are debugging tools that can help you to narrow down the scope of the problem.

3

Hi Paul. Thank you for the reply. I had the jQuery library loaded, only not the UI library. After I added that one it is working for me as well. Thank you for the tip.

4