2nd dropdown list based on the value of first drop down list

Question

I have the following code to generate a dropdown list.

$query = "SELECT * FROM firm";
// Execute it, or return the error message if there's a problem.
$result = mysql_query($query) or die(mysql_error());

$dropdown = "<select name='name'>";
while($row = mysql_fetch_assoc($result)) 
    $dropdown .= "\r\n<option value='{$row['name']}'>{$row['name']}</option>"; 
$dropdown .= "\r\n</select>";

How can i modify this code to make a 2nd dropdown based on the value selected in the above drop down.

What i am trying to achieve is that you can firstly select a firm as above, then secondly i want to be able to choose between the different areas for that specific firm. All this information is in one table.

Is it possible to modify this code.

You would need to use Javascript to modify the second drop down after the user has selected an item in the first (unless they are to post the form after making the first selection). — Robadob, Aug 13 '13 at 11:20
possible duplicate of [How to populate second dropdown based on selection of first dropdown using jQuery/AJAX and PHP/MySQL?](http://stackoverflow.com/questions/8749326/how-to-populate-second-dropdown-based-on-selection-of-first-dropdown-using-jquer) http://stackoverflow.com/questions/8749326/how-to-populate-second-dropdown-based-on-selection-of-first-dropdown-using-jquer — M Khalid Junaid, Aug 13 '13 at 11:25

score 0 · Answer 1 · edited May 23 '17 at 11:56

You can bind a change event on the first select element

$("#firm").change(function(){...});

When that happens you need to make an AJAX request to get those extra options for the second select element and then use that result set to populate the new select element.

Here you can see the Javascript implementation of getting that new result set and populating select element: Populate Select box options on click with Javascript/Jquery with Json data

P.S. There is a second option where you don't use AJAX but get all select options first with their relationships to each other and then based on selected item hide/show connected areas in the second select element.

score 0 · Answer 2 · answered Aug 13 '13 at 11:33

create a function in javascript to generate query string :

<script type="text/javascript">
function show(val){
  window.location="pagename.php?drp="+val;
}
</script>

call this function on onchange event of Dropdown:

  $dropdown = "<select name='name' onChange='show(this.value)'>";

now a query string generate. fetch query string value in any variable

Bind second Dropdown:

if(isset($_REQUEST["drp"]))
{
   $val=$_REQUEST["drp"];
$query = "SELECT * FROM tablename where parametername='$val'";
    // Execute it, or return the error message if there's a problem.
    $result = mysql_query($query) or die(mysql_error());

    $dropdown = "<select name='drp2'>";
    while($row = mysql_fetch_assoc($result)) {

    $dropdown .= "\r\n<option value='{$row['name']}'>{$row['name']}</option>";
    }
    $dropdown .= "\r\n</select>";
}

hi have managed to to the dropdowns with ajax and php can anyone please help me to put in in html form? see my link here http://stackoverflow.com/questions/18227256/populate-triple-drop-down-in-ajax-and-php-in-a-form — Alwina, Aug 14 '13 at 09:36

2nd dropdown list based on the value of first drop down list

2 Answers2

Linked