<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Dropdown Example</title>
</head>
<body>

    <h2>Simple Dynamic Dropdowns</h2>
    
    <form>
        <label for="state">state:</label>
        <select id="state" name="state" onchange="populateCities()">
            <option value="">Select State</option>
            <option value="MAHA">Maharashtra</option>
            <option value="UP">Uttar Pradesh</option>
	    <option value="MP">Madhya Pradesh</option>
           
        </select>

        <br>

        <label for="city">City:</label>
        <select id="city" name="city">
            <!-- Cities will be dynamically populated based on the selected state -->
        </select>

        <br>

        <input type="submit" value="Submit">
    </form>

    <script>
        function populateCities() {
            var stateSelect = document.getElementById('state');
            var citySelect = document.getElementById('city');

            // Reset city dropdown
            citySelect.innerHTML = '<option value="">Select a city</option>';

            // Get selected state
            var selectedstate = stateSelect.value;

            // Populate city dropdown based on the selected state
            if (selectedstate === 'MAHA') {
                addOption(citySelect, 'Amravati');
                addOption(citySelect, 'Aurangabad');
		addOption(citySelect, 'Latur');
                addOption(citySelect, 'Mumbai');
		addOption(citySelect, 'Nagpur');
                addOption(citySelect, 'Nanded');
                addOption(citySelect, 'Nashik');
		addOption(citySelect, 'Navi Mumbai');
		addOption(citySelect, 'Panvel');
		addOption(citySelect, 'Pune');
		addOption(citySelect, 'Satara');
                addOption(citySelect, 'Thane');          

            } else if (selectedstate === 'UP') {
                addOption(citySelect, 'Agra');
                addOption(citySelect, 'Azamgarh‎');
                addOption(citySelect, 'Aligarh‎');
		addOption(citySelect, 'Bareilly‎');
                addOption(citySelect, 'Faizabad‎');
                addOption(citySelect, 'Gorakhpur‎‎');
		addOption(citySelect, 'Jhansi');
                addOption(citySelect, 'Kanpur‎‎');
                addOption(citySelect, 'Lucknow‎‎');
		addOption(citySelect, 'Sultanpur‎‎');

            } else if (selectedstate === 'MP') {
                addOption(citySelect, 'Bhopal');
                addOption(citySelect, 'Burhanpur');
                addOption(citySelect, 'Indore‎');
		addOption(citySelect, 'Itarsi‎');
                addOption(citySelect, 'Ratlam');
                addOption(citySelect, 'Ujjain');

            }
            
        }

        function addOption(select, value) {
            var option = document.createElement('option');
            option.value = value;
            option.text = value;
            select.add(option);
        }
    </script>

</body>
</html>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.