To create a dropdown in HTML where the selection in one dropdown affects the options available in another dropdown, you can use JavaScript. Here's a simple example:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Example</title>
</head>
<body>
<label for="firstDropdown">Select Category:</label>
<select id="firstDropdown" onchange="updateSecondDropdown()">
<option value="fruit">Fruit</option>
<option value="vegetable">Vegetable</option>
</select>
<label for="secondDropdown">Select Item:</label>
<select id="secondDropdown">
<!-- Options will be populated dynamically using JavaScript -->
</select>
<script>
function updateSecondDropdown() {
var firstDropdown = document.getElementById("firstDropdown");
var secondDropdown = document.getElementById("secondDropdown");
var selectedCategory = firstDropdown.value;
// Clear existing options
secondDropdown.innerHTML = "";
// Add new options based on the selected category
if (selectedCategory === "fruit") {
var fruitOptions = ["Apple", "Banana", "Orange"];
populateDropdown(secondDropdown, fruitOptions);
} else if (selectedCategory === "vegetable") {
var vegetableOptions = ["Carrot", "Broccoli", "Spinach"];
populateDropdown(secondDropdown, vegetableOptions);
}
}
function populateDropdown(dropdown, options) {
for (var i = 0; i < options.length; i++) {
var option = document.createElement("option");
option.text = options[i];
option.value = options[i];
dropdown.add(option);
}
}
</script>
</body>
</html>
```
This example has two dropdowns – the first for selecting a category (Fruit or Vegetable), and the second for displaying items based on the selected category. The options in the second dropdown are updated dynamically using JavaScript when the first dropdown's value changes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rank and Level Dropdown</title>
</head>
<body>
<form>
<label for="rank">Select Rank:</label>
<select id="rank" name="rank" onchange="updateLevelOptions()">
<option value="unranked">Unranked</option>
<option value="silver">Silver</option>
<option value="gold">Gold</option>
</select>
<label for="level">Select Level:</label>
<select id="level" name="level">
<!-- Options will be populated dynamically using JavaScript -->
</select>
</form>
<script>
function updateLevelOptions() {
var rankDropdown = document.getElementById("rank");
var levelDropdown = document.getElementById("level");
var selectedRank = rankDropdown.value;
// Clear existing options
levelDropdown.innerHTML = "";
// Add new options based on the selected rank
if (selectedRank === "unranked") {
var unrankedOptions = ["Unranked"];
populateDropdown(levelDropdown, unrankedOptions);
} else {
// For Silver and Gold ranks, add levels 1 to 10
for (var i = 1; i <= 10; i++) {
var option = document.createElement("option");
option.text = "Level " + i;
option.value = i;
levelDropdown.add(option);
}
}
}
function populateDropdown(dropdown, options) {
for (var i = 0; i < options.length; i++) {
var option = document.createElement("option");
option.text = options[i];
option.value = options[i];
dropdown.add(option);
}
}
</script>
</body>
</html>
Here many types of latest technology news, many useful (tools, software, apps, website, technical problem solution )If you have any query regrading Site, Advertisement and any other issue, please feel free to contact me