Home > Backend Development > PHP Tutorial > How to Implement Auto-changing Options in Second Dropdown Menu Based on First Dropdown Selection?

How to Implement Auto-changing Options in Second Dropdown Menu Based on First Dropdown Selection?

DDD

Release： 2024-10-21 06:45:02

Original

965 people have browsed it

Auto-changing Options in Second Dropdown Menu Based on First Dropdown Selection

When creating multiple dropdown menus where the options in the second menu depend on the selection made in the first menu, it is possible to achieve this without relying on a database.

Initial Setup

The first dropdown menu will display a list of categories, while the second dropdown will display items associated with the selected category.

First Dropdown:

<select name="category"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><option value="0">None</option>
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>

Copy after login

Second Dropdown:

<select name="items"><br></select><br>

Dynamic Options in Second Dropdown

To update the options in the second dropdown based on the selection in the first dropdown, we need an AJAX function that sends the selected category to a PHP script.

AJAX Function:

<script type="text/javascript"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function ajaxfunction(parent)
{
    $.ajax({
        url: 'process.php?parent=' + parent;
        success: function(data) {
            $("#sub").html(data);
        }
    });
}

Copy after login

This function is attached to the onchange event of the first dropdown.

In the HTML, place another select element with an id of "sub" to display the dynamically generated options.

<select onchange="ajaxfunction(this.value)"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!-- Options would have been initially populated here -->

Copy after login

Processing PHP Script

The process.php script will be responsible for generating the options for the second dropdown based on the selected category.

process.php:

<?php</p><pre class="brush:php;toolbar:false">$parent = array(
    "First" => array("Smartphone", "Charger"),
    "Second" => array("Basketball", "Volleyball"),
    "Third" => array("Apple", "Orange"),
    "Fourth" => array("Dog", "Cat")
);

foreach ($parent[$_GET["parent"]] as $id => $name)
    echo '<option value="', $id,'">', $name,'</option>'</p>
<p>?><br>

In this case, we have used an array to define the category-item relationships. However, this can be easily adapted to retrieve the data from a database as well.

The above is the detailed content of How to Implement Auto-changing Options in Second Dropdown Menu Based on First Dropdown Selection?. For more information, please follow other related articles on the PHP Chinese website!