How to populate dependant select menus dynamically using jQuery, PHP and MySQL?

StackOverflow https://stackoverflow.com/questions/22895427

Question

I have searched quite a bit on here about this topic. But I could not find a solution for my problem. I'd appreciate it a lot if you could help me, this is for a school project I am working on.

I have a database with a table ("Main_table") and columns including "sector" and "sub_sector". I want to have two select boxes, first one will load all the records from database in "sector" column and the second one will load all the records from database in "sub_sector" column depending on the selection value of the first select box. (For example: If I select "plastics" on the first select box, then second select box should be updated with sub_sector values where sector value is equal to "plastics").

I have managed to load the options values from database for the first select box but when I click on any selection, it does not load any option to the second select box. You can find the codes below. I did not put "sector_options.php" below, as it seems to work just fine.

index.html shown below:

<script>
$(document).ready(function() { 

$('#filter_sector')
.load('/php/sector_options.php'); //This part works fine - uploads options to the first select box

$('#filter_sector').change(function() {
$('#filter_subsector').load('/php/subsector_options.php?filter_sector=' + $("#filter_sector").val()
} //This part does not work - no options on the second select box
);
});

</script>

<body>
<div id="sectors"><p>Sector:</p>
<select id="filter_sector" name="select_sector" multiple="multiple" size="5"> </select>    
</div> 

<div id="subsectors"><p>Sub Sector:</p>
<select id="filter_subsector" name="select_subsector" multiple="multiple" size="5"> <option value="" data-filter-type="" selected="selected">
-- Make a choice --</option>
</select> 
</div>      

</body>
</html>

sector_options.php shown below:

<?php

$link = mysqli_connect("*******", "*******","******","********") or die (mysql_error());

$query = "SELECT sector FROM Main_table ";

$result = mysqli_query($link, $query);

while($row = mysqli_fetch_assoc($result)) {
$options .= "<option value=\"".$row['sector']."\">".$row['sector']."</option>\n  ";
}

echo $options;

?>

subsector_options.php shown below:

<?php

$link = mysqli_connect("********", "*****,"*******", "********") or die (mysql_error());

$Sectors = $_REQUEST['filter_sector'];

$query = "SELECT sub_sector FROM Main_table WHERE sector='$Sectors'";

$result = mysqli_query($link, $query);

while($row = mysqli_fetch_assoc($result)) {$options .= "<option value=\"".$row['sub_sector']."\">".$row['sub_sector']."</option>\n  ";
}

echo $options;

?>
Was it helpful?

Solution

For completeness, the solutions were:

  • Check how AJAX operations are doing using a browser network monitor
  • Load AJAX fetcher scripts in a browser tag - in many cases they will render quite happily there, allowing them to be more easily debugged
  • AJAX scripts that return HTML for injection should only return that HTML, and not a full HTML document.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top