Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 428
  • Last Modified:

Create multiple select boxes on the fly depending on selections


I want to create multiple selection boxes to filter a search based on information I have in a database.

Basically id, classification, subclassification1, subclassification2, subclassification3, subclassification4, subclassification5

Example One option in classification could be "birds", when this is selected I want to populate select box 2 with all of the items in subclassification1 where classification is "birds"

One subclassification1 of "birds" could be "ducks" for example so then, I want to populate select box 3 with all of the items in subclassification2 where subclassification1 is "ducks" and so on.

Some will end there, others may go on over all subclassifications

I'm using PHP and MySQL but would like this to be quite fluid so AJAX or jQuery would be great.

Many thanks in advance.
Neil Thompson
Neil Thompson
  • 2
1 Solution
Julian HansenCommented:
Here is some code that illustrates the concept. There are two file the first shows the dynamic method for making an AJAX call back to popuplate a dropdown. Logic for what gets populated is done in the server code and the resulting dropdown HTML is returned along with the id of the control to put it into.

<!doctype html>
<title>EE Test</title
  <label for="lookup1">Change value in this lookup to see change in second</label>
  <select name="lookup1" class="ajaxLookup" id="lookup1">
     <option value="0">Select a value</option>
     <option value="1">Value 1</option>
     <option value="2">Value 2</option>
  <label for="text1">Text2</label>
  <select name="lookup2" class="ajaxLookup" id="lookup2"></select>

  <label for="text1">Text3</label>
  <select name="lookup3" class="ajaxLookup" id="lookup3"></select>
<div id="error">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
  $('.ajaxLookup').change(function() {
    var value=$(this).val();
    var id=$(this).attr('id');

    $.post('lookup.php',{value: value, id: id}, function(resp) {
      $('#' + resp.id).html(resp.html);

Open in new window

The server side script. This script is written for demo purposes - in reality you would be using the value Value passed in as a filter for the data going back. So your input id combined with value determines what you are going to return.
The id of the sending control is used to do the lookup test - and the target id of the receiving control is sent back in the JSON ojbect returned.
The DB code is commented out so the demo will work but demonstrates the concept.
//$link = mysqli_connect("host", "user", "pass", "db");
//if (mysqli_connect_errno()) {
//    printf("Connect failed: %s\n", mysqli_connect_error());
//    exit();
// Get the id and value from the lookup
$id = htmlentities($_POST['id']);
// Some code to determine which lookup we are dealing with - this file can be used to process multiple lookups
if ($id == 'lookup1') {
	$resp=array('id' => 'lookup2', 'html' => '');
	$values = array("Mouse","Cat","Dog");
	foreach($values as $v) {
		$resp['html'] .= '<option value="' . $v . '">' . $v . '</option>';
else if ($id=='lookup2') {
	$resp=array('id' => 'lookup3', 'html' => '');
	$values = array("House","Hut","Cabin");
	foreach($values as $v) {
		$resp['html'] .= '<option value="' . $v . '">' . $v . '</option>';
else if ($id=="sampledblookup") {
	$query = "SELECT id, subcat FROM subcat WHERE catnumber=$value";
	$result = mysqli_query($link, $query);
	$resp=array('id' => 'lookup2', 'html' => '');
	if ($result) {
		while($row = mysqli_fetch_assoc($result)) {
			$resp['html'] .= '<option value="' . $row['id'] . '">' . $row['subcat'] . '</option>';

	// return the array as a JSON encoded string

Open in new window

Neil ThompsonSenior Systems DeveloperAuthor Commented:
Excellent, just what I was after, thanks
Julian HansenCommented:
You are welcome

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now