Related Topics
Node JS
React JS
AJAX
<select id="country-dropdown">
<option value="">Select a country</option>
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select>
<select id="city-dropdown">
<option value="">Select a city</option>
</select>
JavaScript:
$(document).ready(function() {
// When the country dropdown changes
$("#country-dropdown").change(function() {
// Get the selected country
var country = $(this).val();
// Make an AJAX request to the server
$.getJSON("/cities", {country: country}, function(data) {
// Clear the city dropdown
$("#city-dropdown").empty();
// Add the cities to the city dropdown
$.each(data, function(index, city) {
$("#city-dropdown").append("<option value='" + city + "'>" + city + "</option>");
});
});
});
});
In this example, we attach an event listener to the #country-dropdown element using jQuery’s change() method. When the dropdown changes, we get the selected country value and make an AJAX request to the server using jQuery’s getJSON() method. The server should respond with a JSON object containing an array of cities for the selected country. Once we receive the JSON data, we clear the #city-dropdown element and add the cities to it using jQuery’s each() method.
Note that the server-side implementation is not shown here, but it would involve handling the AJAX request, querying a database or other data source for the list of cities, and returning the data in JSON format.
Popular Category
Topics for You
Node JS
React JS
Go through our study material. Your Job is awaiting.