How do I make a list in a drop down box depending on another drop down box?

Question

How to create a form with 2 drop down list box in PHP, which is the second "drop down list box" relies on the results of the first "drop down list box"? I apologize if this question has been asked, but I could not find a similar question. Thank you in advance.

Sory, i'm a newbie. Here is my Code:

<script>
function reloadPage()
  {
  location.reload();
  }
</script>
<form name="form1" action="updateitemstock.php" method="post">
 <table border="0" width="50%">
  <tr>
    <td width="18%"><b><font face="Verdana" size="2" color="#FFFFFF">Select 
Vendor</font></b></td>
    <td width="18%"><select size="1" id=name="dvendor">
<option selected>Choose Vendor Name</option>
    <?php
    while ($row = mysql_fetch_array($vendor_list)) { 
    ?>
 <option value="<?php echo $row[0]; ?>" onclick="reloadPage()"><?php echo $row[0]; ?></option>
<?php
    }
    ?>
    </select></td>
  </tr>
  <tr>
    <td width="18%"><b><font face="Verdana" size="2" color="#FFFFFF">Select 
Item</font></b></td>
    <td width="18%"><select size="1" name="ditem">
    <option selected>Choose Item Name</option>
    <?php
    if (isset($_POST['dvendor']) {
   $item_list = mysql_query("SELECT DISTINCT itemdesc FROM item WHERE dealer=$_POST['dvendor']");
  }
  while ($row = mysql_fetch_array($item_list)) { 
    ?>
          <option value="<?php echo $row[0]; ?>"><?php echo $row[0]; ?></option>
    <?php
  }
    ?>
    </select></td>
  </tr>
  <tr>
    <td width="18%" colspan="2">
    <div align="center">
  <table border="0">
   <tr>
    <td>
    <input type="submit" value="Save" name="bsave"></td>
     <td>
    <input type="submit" value="Upload" name="bupload"></td>
   </tr>
  </table>
    </div>
    </td>
  </tr>
 </table>
 </form>

@Baskoro check demo URL http://www.jqueryscript.net/demo/Dynamic-jQuery-Cascading-Dropdown-Lists-Plugin/ — Ajit Singh, Mar 04 '14 at 06:46
http://stackoverflow.com/questions/19728666/drop-down-box-dependent-on-the-option-selected-in-another-drop-down-box — rink.attendant.6, Mar 04 '14 at 06:46
Thank you for your answer already given. I use JQUERY to resolve the problem. — Baskoro, Mar 11 '14 at 05:13

score 0 · Accepted Answer · answered Mar 04 '14 at 06:49

The two lists can be, besides, created in PHP, yet their data has to rely on a client side language, eg. JS or jQuery. For example, you want to create two lists, say, one for list of states and other for cities in the state chosen from the previous list. In that case, you will initially fill the list for states using PHP and in list for states, you will create a blank template (with no 'option' element in list). Now, at the user end, when a user selects a state, you can send an AJAX request to your server and get list of cities for that chosen state. When the request completes, you can populate the cities list with data returned by your server. Alternatively, you can create a single list for state and as many lists for cities as many are the states. Each of this list will contain cities for one state respectively. Now, at the client side, you can bind a 'change' event to states list where only a single cities list will be shown to user at a time as per state chosen by him. Besides this approach is not suggested, this approach depreciates the need of any AJAX requests, but then you have to create all the list for once at the backend. I hope that helps :)

score 0 · Answer 2 · answered Mar 04 '14 at 06:54

0

Give this javascript Cascading Dropdown a go: http://jquery-plugins.net/jquery-cascading-dropdown-plugin

answered Mar 04 '14 at 06:54

Stu1986C

1,452
1
18
34

score 0 · Answer 3 · answered Mar 04 '14 at 06:55

0

There is a jQuery plugin which will be helpful. For the dynamic select, use the remote version.

Chained Selects Plugin for jQuery

Hope this helps :)

answered Mar 04 '14 at 06:55

Ijas Ameenudeen

9,069
3
41
54

How do I make a list in a drop down box depending on another drop down box?

3 Answers3