State city selector using html JavaScript || state city automatic selection

This tutorial will tell you how you can easily make State city selector using html JavaScript. Watch the complete video on youtube with explanation in hindi.

In many web applications, it is common to have a form that requires users to select their state and city. However, manually adding all the states and cities in a dropdown menu can be a tedious task. This is where the state-city selector comes in handy. In this tutorial, we will learn how to implement a state-city selector using HTML, JavaScript, and JSON data.

First, let's create the HTML structure for our state-city selector. We will use two <select> elements, one for the state and another for the city. The HTML code for our state-city selector will look like this:

<!DOCTYPE html> <html> <head> <title>State-City Selector</title> </head> <body> <select id="state-selector"> <option value="" disabled selected>Select State</option> </select> <select id="city-selector"> <option value="" disabled selected>Select City</option> </select> </body> <script src="script.js"></script> </html>

Next, we will create the JSON data for our states and cities. The data will contain an array of objects, each object representing a state and its cities. Here's an example:

const states = [ { name: 'California', cities: ['Los Angeles', 'San Francisco', 'San Diego'] }, { name: 'New York', cities: ['New York City', 'Buffalo', 'Rochester'] }, // Add more states as needed ];

You can easily download the code from below link.

Subscribe the channel and wait seconds if subscribed already then ignore and wait..