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

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