How to create dynamic drop down list in PHP?

Question

Table courses

courseID    courseName
   1    Diploma-Polytechnic
   2    UG-Bachelor of Architecture (B.Arch)
   3    UG-Bachelor of Engineering (B.E)
   4    UG-Bachelor of Technology (B.Tech)
   5    PG-Master of Architecture (M.Arch)

Table branch

branchID    courseID    branchName
1              1    Civil Engineering
2              1    Computer Sci & Technology
3              1    Electrical Engineering
4              2    E&TC
5              2    Mechanical Engineering

And my code for which I want solution in which I have been able to fetch all courses for 1st dropdown list

<select name="courseName">
      <option value="">Select Courses</option>
    <?php $sql = "SELECT * FROM courses ";
    $res = mysql_query($sql) or die(mysql_error());
    while($row=mysql_fetch_assoc($res)) {
      ?> 
    <option value=""><?php echo $row['courseName']; ?></option>
    <?php } ?>
    </select>

Second dropdown list is kept empty because I want something like this.

If User selects 1 course from 1st dropdown then automatically data should be fetched from the branch table in second dropdown list with that related course. It would be better if their is IF condition for this

      <select name="sDepartment">

    <option value="">Department You Study</option>
     <option value="">  </option></select>

For example if user Select Diploma-Polytechnic of ID 1 From 1st Dropdownlist Then The 2nd Dropdown list Should Have Options

Civil Engineering
Computer Sci & Technology
Electrical Engineering

If possible plz provide me JS/AJAX code compatible to my code.

Answer 1

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

Answer 2

You have to use Ajax :

On change of your first select, call a Javascript function that will post the value of the selected option to your PHP code, this one should return for example an array of values corresponding to the value sent.

if select 1 changes : call your function that will post the value to PHP code, then : populate your select 2 with the result.

You could use JQuery which is very easy !

POST : https://api.jquery.com/jquery.post/

listen changes : https://api.jquery.com/change/