<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dependent Dropdown</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
select {
padding: 8px;
margin: 5px;
}
</style>
</head>
<body>
<label for="state">Select State:</label>
<select id="state" onchange="populateDistricts()">
<option value="">-- Select State --</option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Telangana">Telangana</option>
<!-- Add more states as needed -->
</select>
<label for="district">Select District:</label>
<select id="district">
<option value="">-- Select District --</option>
<!-- District options will be populated dynamically using JavaScript -->
</select>
<script>
const stateDistrictsMap = {
"Andhra Pradesh": ["Anantapur", "Chittoor", "East Godavari", "Guntur", "Krishna", "Kurnool", "Nellore", "Prakasam", "Srikakulam", "Visakhapatnam", "Vizianagaram", "West Godavari", "Y.S.R. Kadapa"],
"Telangana": ["Adilabad", "Bhadradri Kothagudem", "Hyderabad", "Jagtial", "Jangaon", "Jayashankar Bhupalpally", "Jogulamba Gadwal", "Kamareddy", "Karimnagar", "Khammam", "Komaram Bheem Asifabad", "Mahabubabad", "Mahabubnagar", "Mancherial", "Medak", "Medchal–Malkajgiri", "Nagarkurnool", "Nalgonda", "Nirmal", "Nizamabad", "Peddapalli", "Rajanna Sircilla", "Rangareddy", "Sangareddy", "Siddipet", "Suryapet", "Wanaparthy", "Warangal Rural", "Warangal Urban", "Yadadri Bhuvanagiri"]
// Add more states and districts as needed
};
function populateDistricts() {
const stateSelect = document.getElementById("state");
const districtSelect = document.getElementById("district");
const selectedState = stateSelect.value;
// Clear previous options
districtSelect.innerHTML = "<option value=''>-- Select District --</option>";
// Populate districts based on the selected state
if (selectedState && stateDistrictsMap[selectedState]) {
stateDistrictsMap[selectedState].forEach(district => {
const option = document.createElement("option");
option.value = district;
option.text = district;
districtSelect.add(option);
});
}
}
</script>
</body>
</html>
1. HTML Structure:
- The HTML file starts with the usual document structure, including a head and body.
- Two `<select>` elements are defined, one for states and another for districts. They both have unique IDs (`state` and `district`).
2. CSS Styling:
- A simple CSS style is included to provide some basic styling for better presentation. It adds a margin and padding to the `select` elements.
3. State and District Data:
- A JavaScript object named `stateDistrictsMap` is defined. It maps each state to an array of districts. This is a static example, and in a real-world scenario, you would likely fetch this data from a database or an API.
4. JavaScript Functions:
- The `populateDistricts()` function is defined. This function is triggered whenever the state dropdown changes (`onchange="populateDistricts()"`).
- Inside the function, it gets the selected state from the state dropdown.
- It then clears the options in the district dropdown and populates it with the districts corresponding to the selected state.
5. Populating Districts Dynamically:
- The `stateDistrictsMap` is used to retrieve the array of districts for the selected state.
- For each district in the array, a new `<option>` element is created dynamically in JavaScript.
- The value and text of the option are set to the district name, and the option is added to the district dropdown.
6. Usage in HTML:
- In the HTML, the state dropdown has options for each state, and the districts dropdown starts with a default "Select District" option.
- The `onchange` attribute of the state dropdown is set to call the `populateDistricts()` function whenever the selected state changes.
This code provides a simple example of a dependent dropdown where the options in the second dropdown (districts) depend on the selection made in the first dropdown (states).
Comments
Post a Comment
Share with your friends :)
Thank you for your valuable comment