Create multiple select boxes on the fly depending on selections

Posted on 2012-09-19
Last Modified: 2012-09-20

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.
Question by:NeilT
    LVL 49

    Accepted Solution

    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.

    The HTML
    <!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=""></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) {
          $('#' +;

    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

    LVL 3

    Author Closing Comment

    Excellent, just what I was after, thanks
    LVL 49

    Expert Comment

    by:Julian Hansen
    You are welcome

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Do You Know the 4 Main Threat Actor Types?

    Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

    Suggested Solutions

    Title # Comments Views Activity
    Bing Maps 1 23
    Amazon Product image url. 12 25
    SharePoint display modal blank 2 15
    JQuery tracking event. 3 11
    OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
    PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
    This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now