How to create dynamic drop down list in PHP?

If you don't want to use Ajax you can set the different lists up in regular javascript when the page loads in your script tag, and then have the 'onchange' of the first dropdown change the contents of the second dropdown by switching the contents of the select to whichever pre-built group you need.

Basically have all the different possible options for the second dropdown in a javascript function that rebuilds the dropdown list as needed when the first dropdown changes.

This will require a combination of javascript, PHP, and mysql (which you're already using) and doesn't require any Ajax or even jQuery at all.

For example, set up your first select statement with an onChange like this, using this.value so that when it changes it sends the value to the function (and remember to set the ID as well so that we can use getElementByID):

 <select name="courseName" id="courseName" onChange="setBranchList( this.value )" >

An important note about the courseName select statement - in the example provided the 'value' for each option is empty - it's important that it's set for this solution to work. Like this:

 <option value="<?php echo $row['courseID']; ?>"><?php echo $row['courseName']; ?></option>

The select for the second dropdown could be like this (ID needs to be set):

 <select name="sDepartment" id="sDepartment">

Then have a JS function like this with some PHP with nested while loops inside that selects all the values for the first dropdown on the outer loop, then creates build statements for all the possible values for the second dropdown on the inner loop.

<script type="text/javascript">
function setBranchList( courseID )
{
   var selector_to_fill = document.getElementById("sDepartment");
   selector_to_fill.options.length = 0;

    <?php 

    $course_query = "SELECT * FROM courses ORDER BY courseID";
    $course_result = mysql_query($course_query);

    while ($course_detail = mysql_fetch_array($course_result))
    { ?>

        if (courseID == '<?php echo $course_detail['courseID']; ?>'){

        <?php $list_count = 0;

            $branch_query = "SELECT * FROM branch WHERE courseID = '$course_detail[courseID]' ORDER BY branchID";
            $branch_result = mysql_query($branch_query);

            while ($branch_detail = mysql_fetch_array($branch_result))
            { ?>

                selector_to_fill.options[<?php echo $list_count; ?>]=new Option("<?php echo $branch_detail['branchName']; ?>", "<?php echo $branch_detail['branchID']; ?>", false, false);

                <?php

                $list_count++;

            } ?>
        }
    <?php 
    } ?>
}
</script>

When a user visits your page, the PHP builds out a series of IF statements in the setBranchList function based on whatever's in your db before sending it to the user, so what the user gets is some javascript that looks like this:

        if (courseID == '1'){

            selector_to_fill.options[0]=new Option("Department You Study", "", false, false);                   

                selector_to_fill.options[1]=new Option("Civil Engineering", "1", false, false);         

                selector_to_fill.options[2]=new Option("Computer Sci & Technology", "2", false, false);         

                selector_to_fill.options[3]=new Option("Electrical Engineering", "3", false, false);            
                            }

        if (courseID == '2'){           

            selector_to_fill.options[0]=new Option("Department You Study", "", false, false);                               

                selector_to_fill.options[1]=new Option("E&TC", "4", false, false);          

                selector_to_fill.options[2]=new Option("Mechanical Engineering", "5", false, false);            
                            }

        if (courseID == '3'){           

            selector_to_fill.options[0]=new Option("Department You Study", "", false, false);                               
                        }

        if (courseID == '4'){           

            selector_to_fill.options[0]=new Option("Department You Study", "", false, false);                               
                        }

        if (courseID == '5'){           

            selector_to_fill.options[0]=new Option("Department You Study", "", false, false);                               
                        }
        }

Some notes on this example:

• the 'selector_to_fill.options.length = 0;' part clears all the options out of the second list each time the function is called

• the list is built using the DOM with 'new Option'.

• the php $list_count variable is used because each option in a select statement needs an index starting with 0. This variable represents the index for each item and resets through every loop so that the indexes always increment properly.

• I built this a long time ago before I learned about jquery and ajax and tested this solution again before posting to make sure it still works :p