php - How to retrieve data from dropdown list to another dropdown list?

Question

I'm not sure how to explain . Its confusing to me as I'm still a newbie in this php world. Hope you guys can help me.

I have a form. In that form there are two dropdown list. The first dropdown list will display all the location that have been save in database. The problem is that how can I, display the id number in the second dropdown list based on the location that have been selected in the first dropdown list .

Can anyone help me ?

Code:

  <form action="form.php" method="post" name="order">
<table>
 <tr>
    <td>Select Location :</td>
    <td> <select name="location" id="location">
    <option>-- Location --</option>
    <?php


$query="SELECT DISTINCT  location FROM inventory";
        $result=mysql_query($query);
            while(list($locationid)=mysql_fetch_row($result)) {
            echo "<option value="".$location."">".$location."</option>";
    }
   ?>
    </select>

      </td>
    </tr>

    <tr>
    <td>Date :</td>
    <td><input type="text" nama="date" /></td>
     </tr>

  <td>Id Number:</td>

    <?php
   $query="SELECT DISTINCT  idno FROM asset WHERE locationid='inventory.location'";
    $result=mysql_query($query);
    while(list($idno)=mysql_fetch_row($result)) {
        echo "<option value="".$idno."">".$idno."</option>";
    }
   ?>

       </td>
</tr>
<tr><td>
<input type="button" value="submit" name="submit" /> </td></tr>
</table>

Answer 1

You have 3 main options:

1. Do it "all at once" with one call to your PHP page to render the HTML for the page and NO postbacks to another page and refresh in the browser, NOR any AJAX call for JSON for the 2nd dropdown. Instead you would "push" all possible values for BOTH dropdowns to the browser and use Javascript to actually narrow the list of displayed values in the 2nd dropdown depending on what you selected in the first

2. Do it with 2 "calls" to your php page, the first time rendering the page with all values in the 1st dropdown and NO values in the 2nd, then when you selected the value from the 1st dropdown, your page/form/dropdown would trigger a postback (your 2nd call) to your PHP page, which would RE-RENDER the page with the 2nd dropdown ALSO filled, but with only the appropriate (narrowed-down) options.

3. Do it with 2 calls, but without RE-RENDERING the page and NO POSTBACK. Instead, you would have 2 PHP pages/scripts on the server.

   1. The first script renders the HTML page with the 2 dropdowns and fills the first one with its values.
   2. Upon selection of a choice in the first dropdown, an AJAX request to your 2nd script is trigger. When that page/script is called on the PHP server, it DOES NOT render and send HTML, but instead, only JSON that represents the appropriate (narrowed-down) values for the 2nd drop-down. The AJAX call initiated in the browser is done via Javascript that waits for the JSON to return. When it does, you then process it and "change the values" in the 2nd dropdown.

   This can be done with Native Javascript or jQuery. But, it's much, much easier with jQuery.