CODEWITHSUNDEEP
phphtmlhtml.dropdownlistfor
zara
zara

Reputation: 15

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

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>

Upvotes: 0

Views: 4002

Answers (3)

Mitul Shah
Mitul Shah

Reputation: 1566

The another answer I'm posting here :

(Please try changing content according to your requirement.)

    <span class="location_lable">Please select state from Dropdown: </span>
     <?php 
     $row =  $wpdb->get_results("SELECT distinct(state_id), state_name from wp_state_city ", ARRAY_N);
     echo "<select name='states' id='states'><option value=''>Select State</option>";
     foreach($row as $results)
     {
     echo $fetchData = '<option value="'.$results[0].'">'.$results[1].'</option>';
     }
     echo "</select>";
      ?>

    <span class="location_lable">Please select city from Dropdown: </span>
    <select name="city" id="city"><option value=" ">Select city</option></select>  

    <script>
      $("#states").change(function() {
       $("#city").html(' ');
       state_v = $(this).val();
       param = "get_city_front"; 
         $.ajax({
            url: "locationtrack.php",
            type: 'POST',
            dataType: 'json',
            data: {'state_v': state_v, 'param': param},
            dataType: 'json',
            cache: false,
            success: function(data){
                 $("#city").append(jqxhr.responseText);// need to show success
            },
            error: function(jqxhr) {
                $("#city").append(jqxhr.responseText); 
            }
         }); 
     });
</script>

locationtrack.php

Add query and return result in one variable .

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

Upvotes: 0

user3606795
user3606795

Reputation:

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.

Upvotes: 2

Mitul Shah
Mitul Shah

Reputation: 1566

There are several post on SO about this topic. Please, read these topics first, hope these will help-

  1. Populate one dropdown list based on the selection of other dropdown list
  2. jQuery show/hide drop-down options based on another drop-down option

Finally, you can check the tutorial here to populate dropdown based on dropdown selection...

Tutorial Here | Demo Here

Credit goes to

Upvotes: 0

Related Questions