How to Update Dropdown Options Automatically Based on First Dropdown Selection Without a Database?

How to Automatically Update Options in a Second Dropdown Based on the Selection in a First Dropdown Without Using a Database

You have two dropdowns where the options are not retrieved from a database. The first dropdown allows the user to select a category. The options in the second dropdown depend on the selection in the first dropdown.

For example, if the user chooses the First option in the first dropdown, the second dropdown should display the options Smartphone and Charger. If the user changes their selection to the Second option, the second dropdown should now display the options Basketball and Volleyball.

Implementation without Using a Database

<select name="category" onchange="changeSecondDropdown(this)"><pre class="brush:php;toolbar:false"><option value="0">None</option>
<option value="1">First</option>
<option value="2">Second</option>

<script><br>function changeSecondDropdown(category) {<br> const options = {</script>

"1": ["Smartphone", "Charger"],
"2": ["Basketball", "Volleyball"]

};

// Clear the options in the second dropdown
const itemsDropdown = document.getElementById("items");
itemsDropdown.innerHTML = "";

// Add the new options based on the selected category
const selectedOptions = options[category.value];
for (const option of selectedOptions) {

const newOption = document.createElement("option");
newOption.value = option;
newOption.textContent = option;
itemsDropdown.appendChild(newOption);

}
}

This implementation uses a JavaScript object to store the options for each category. When the user changes the selection in the first dropdown, the changeSecondDropdown function is called, which updates the options in the second dropdown based on the selected category.

The above is the detailed content of How to Update Dropdown Options Automatically Based on First Dropdown Selection Without a Database?. For more information, please follow other related articles on the PHP Chinese website!