How to Create Dynamic Cascading Dropdown Boxes using jQuery and AJAX?

Dynamic Cascading Dropdown Boxes

This example demonstrates the creation of a dynamic drop-down box that populates the second drop-down box based on the selection of the first drop-down box, as required.

Explanation:

1. First Drop-Down Box:

   • Contains options for the user to select.
   • When the user selects an item, it triggers the change event.

2. jQuery/AJAX:

   • The change event triggers an AJAX request to a separate PHP file (e.g., update.php).
   • The selected value from the first drop-down box is sent along with the request.

3. update.php:

   • Receives the selected value from the first drop-down box.
   • Executes a query to retrieve relevant options for the second drop-down box.
   • Formats the data in JSON format and returns it to the AJAX call.

4. AJAX Success Function:

   • Receives the JSON response and populates the second drop-down box with the relevant options.

Example Code:

tester.php:

<select name="gender"></select>

update.php:

if (!empty($_GET['id']) && !empty($_GET['value'])) {
    $id = $_GET['id'];
    $value = $_GET['value'];

    $sql = "SELECT * FROM `category` WHERE `master` = ?";
    $statement = $objDb->prepare($sql);
    $statement->execute(array($value));
    $list = $statement->fetchAll(PDO::FETCH_ASSOC);

    if (!empty($list)) {
        $out = array('<option value="">Select one</option>');

        foreach ($list as $row) {
            $out[] = '<option value="' . $row['id'] . '">' . $row['name'] . '</option>';
        }

        echo json_encode(array('error' => false, 'list' => implode('', $out)));
    } else {
        echo json_encode(array('error' => true));
    }
} else {
    echo json_encode(array('error' => true));
}

Mechanism:

1. When a user selects an option from the first drop-down box, its value is captured.
2. An AJAX request is made to update.php, carrying the selected value.
3. update.php retrieves the appropriate options for the second drop-down box and returns them in JSON format.
4. The AJAX success function updates the selected options in the second drop-down box, making it dynamic.

By following these steps, you can create cascading drop-down boxes that provide a user-friendly and responsive interface for data selection.

The above is the detailed content of How to Create Dynamic Cascading Dropdown Boxes using jQuery and AJAX?. For more information, please follow other related articles on the PHP Chinese website!