使用PHP中的onchange函数创建多个相关的下拉菜单

Question

I want to create Four Dropdown menus using onchange function in PHP.

Content under First dropdown (Year) is independent whereas Month dropdown is dependent on Year selection, Week dropdown is dependent on Month selection and Amount dropdown is dependent on Week selection.

All the columns are in the same Table collection as shown below

PHP Code:-

<select name="year" id="year">
<option value="">Select</option>;
<?php $select_year=mysqli_query($db,"SELECT * FROM collection");
while ($row=mysqli_fetch_array($select_year)){
$year=$row['Year'];
echo '<option value="'.$row['Year'].'">'.$row['Year'].'</option>';} ?>

<select name="month" id="month" onchange="">
<option value="">Select</option>;
<?php $select_month=mysqli_query($db,"SELECT * FROM collection where Year like '$year'");
while ($row2=mysqli_fetch_array($select_month)){
$month=$row2['Month'];
echo '<option value="'.$row2['Month'].'">'.$row2['Month'].'</option>';} ?>

<select name="week" id="week" onchange="">
<option value="">Select</option>;
<?php $select_week=mysqli_query($db,"SELECT * FROM collection where Month like '$month'");
while ($row3=mysqli_fetch_array($select_week)){
$week=$row3['Week'];
echo '<option value="'.$row3['Week'].'">'.$row3['Week'].'</option>';} ?>

<select name="amount" id="amount" onchange="">
<option value="">Select</option>;
<?php $select_amount=mysqli_query($db,"SELECT * FROM collection where Week like '$week'");
while ($row4=mysqli_fetch_array($select_amount)){
$year=$row4['Amount'];
echo '<option value="'.$row4['Amount'].'">'.$row4['Amount'].'</option>';} ?>
</select>

I know that my code is incorrect, also I don't know what to put inside onchange="". (If necessary, kindly add jquery or ajax code)

Answer 1

What you're looking for is called a dynamically dependent select box. It's a nice solution that involves jQuery/JavaScript and AJAX calls to your server. You can read more about it here. That link also contains a pretty detailed example.

A simpler solution involves a little bit more jQuery/JavaScript trickery, where the values presented to the user have been mapped to each other on load. The upside is that the values are updated quicker as it's all done in the browser, but the downside is that the JavaScript is a little bit more complex and not well suited for higher numbers of interdependent options.