Skip to main content

Dependent Dropdowns includes a modal to display results

Dependent Dropdown

<!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;

        }


        label {

            display: block;

            margin-bottom: 8px;

        }


        select {

            width: 100%;

            padding: 8px;

            margin-bottom: 16px;

        }


        button {

            padding: 10px;

            background-color: #4CAF50;

            color: white;

            border: none;

            cursor: pointer;

        }


        .modal {

            display: none;

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background-color: rgba(0,0,0,0.7);

            justify-content: center;

            align-items: center;

        }


        .modal-content {

            background-color: #fefefe;

            padding: 20px;

            border-radius: 5px;

            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

        }

    </style>

</head>

<body>


    <label for="state">Select State:</label>

    <select id="state" onchange="populateDistricts()">

        <option value="maharashtra">Maharashtra</option>

        <option value="karnataka">Karnataka</option>

        <!-- Add more states as needed -->

    </select>


    <label for="district">Select District:</label>

    <select id="district"></select>


    <button onclick="showResults()">Show Results</button>


    <div class="modal" id="resultModal">

        <div class="modal-content">

            <span onclick="closeModal()" style="float: right; cursor: pointer;">&times;</span>

            <h2>Results</h2>

            <p id="resultText"></p>

        </div>

    </div>


    <script>

        function populateDistricts() {

            const stateSelect = document.getElementById("state");

            const districtSelect = document.getElementById("district");

            const selectedState = stateSelect.value;


            // Clear previous options

            districtSelect.innerHTML = '';


            // Populate districts based on the selected state

            if (selectedState === "maharashtra") {

                const districts = ["Mumbai", "Pune", "Nagpur", "Nashik"];

                populateOptions(districts, districtSelect);

            } else if (selectedState === "karnataka") {

                const districts = ["Bangalore", "Mysuru", "Hubli", "Mangalore"];

                populateOptions(districts, districtSelect);

            }

            // Add more states and districts as needed

        }


        function populateOptions(options, selectElement) {

            options.forEach(option => {

                const optionElement = document.createElement("option");

                optionElement.value = option.toLowerCase();

                optionElement.text = option;

                selectElement.appendChild(optionElement);

            });

        }


        function showResults() {

            const districtSelect = document.getElementById("district");

            const resultText = document.getElementById("resultText");

            const selectedDistrict = districtSelect.value;


            // Add your logic to fetch and display results based on the selected district

            resultText.textContent = `Results for ${selectedDistrict}`;


            // Show modal

            const modal = document.getElementById("resultModal");

            modal.style.display = "flex";

        }


        function closeModal() {

            const modal = document.getElementById("resultModal");

            modal.style.display = "none";

        }


        // Close modal if clicked outside the modal content

        window.onclick = function(event) {

            const modal = document.getElementById("resultModal");

            if (event.target === modal) {

                modal.style.display = "none";

            }

        };

    </script>


</body>

</html>


HTML Structure:

1. State and District Dropdowns:

   - The HTML includes two dropdowns: one for selecting the state (`<select id="state">`) and another for selecting the district (`<select id="district">`).

   - The state dropdown has hardcoded options for Maharashtra and Karnataka. You can add more states and their corresponding districts as needed.


2. Show Results Button:

   - A button (`<button onclick="showResults()">Show Results</button>`) triggers the `showResults` function when clicked.


3. Modal for Results:

   - There's a hidden modal (`<div class="modal" id="resultModal">`) that will display the results.

   - Inside the modal, there's a close button (`&times;`) and a content area (`<div class="modal-content">`) where the results will be displayed.


CSS Styles:

1. Basic Styling:

   - The CSS styles define the appearance of the page, dropdowns, button, and modal. It ensures a simple and responsive design.


JavaScript Functions:

1. populateDistricts` Function:

   - This function is called when the state dropdown changes.

   - It clears the previous options in the district dropdown and populates it based on the selected state.

   - The districts are hardcoded for Maharashtra and Karnataka. You should replace them with your actual data.


2. populateOptions` Function:

   - A helper function used by `populateDistricts` to populate options in a dropdown.


3. showResults` Function:

   - This function is called when the "Show Results" button is clicked.

   - It fetches the selected district and displays a simple text result in the modal content area.

   - You should replace the text result with your actual logic for fetching and displaying results.


4. closeModal` Function:

   - Closes the modal when called.


5. Window Click Event:

   - Closes the modal if the user clicks outside the modal content.

 Final Notes:

- The code provides a basic structure for dependent dropdowns and a modal for displaying results.

- You need to replace the hardcoded data with your actual data and implement the logic for fetching and displaying results in the `showResults` function.

- Customize the styling and layout according to your design preferences.

Comments

Popular posts from this blog

Story of the Nilavanti Granth

  A story about the Nilavanti Granth: एक समय की बात है, भारत के दिल में एक रहस्यमयी पुस्तक थी जिसे निलावंती ग्रंथ कहा जाता था। यह पुस्तक संस्कृत में एक ऋषि द्वारा लिखी गई थी। यह भारत की सबसे रहस्यमयी और चमत्कारी पुस्तकों में से एक मानी जाती थी। निलावंती ग्रंथ की कहानी निलावंती नामक एक महिला के साथ शुरू होती है, जिसे जादुई क्षमताओं का होना कहा जाता था। कहा जाता था कि उसे सभी जीवित प्राणियों की भाषा समझने की क्षमता थी। इसी अद्वितीय क्षमता के कारण निलावंती ग्रंथ इतना विशेष था। निलावंती उत्तर प्रदेश के एक छोटे से गांव में पैदा हुई थीं। जब वह सिर्फ पांच साल की थी, उसकी मां का निधन हो गया, तब उसके पिता ने उसे लेकर दूसरे गांव में चले गए। निलावंती ने अपने पिता से आयुर्वेद सीखा और उसे पौधों, जानवरों, और पक्षियों की भाषा समझने की अद्वितीय क्षमता भी थी। निलावंती जब बड़ी हुई, तो उसे सपने आने लगे जिसमें भूत-प्रेत उसे पृथ्वी के नीचे छिपे हुए खजानों के बारे में बताते थे। इन खजानों के बारे में जानने के बावजूद, निलावंती, एक सच्ची व्यक्ति होने के नाते, कभी उन्हें खोदकर नहीं निकाली। बजाय इसके, उसने भ...

Calculate Your Fuel Cost

Estimate your one-way and return trip fuel costs with the Fuel Cost Calculator. Choose your currency, enter trip details, and get instant cost calculations for your journey. Plan your travel budget effectively. Fuel Cost Calculator Fuel Cost Calculator Trip Distance (km): ℹ️ Fuel Efficiency (km/l): ℹ️ Price per Liter (in Rupees): ℹ️ Calculate The "Fuel Cost Calculator" is a simple web tool designed to help you estimate the fuel required and the total cost for your one-way and return trips based on your vehicle's mileage and the current price of petrol. Here's how to use it: Input Your Trip Details: Enter the "Trip Distance" in kilometers. This is the one-way distance you plan to travel. Specify your "Fuel Efficiency" in kilometers per liter (km/l). This is the average mileage your vehicle achieves. Enter the "Price ...

Odisha Goverment Public Holidays 2024

Holidays Public Holidays Optional Holidays January February March April May June July August September October November December Introduction The Holidays web page provides information about public and optional holidays for different months. You can explore holidays based on the type (public or optional) and select a specific month to view the corresponding holiday details. Getting Started To use the Holidays web page, follow these steps: 1. Open the web page in a compatible browser. 2. Explore the different tabs and select the type of holidays you want to view (Public or Optional). 3. Choose a specific month from the dropdown menu. 4. The web page will display the corresponding holiday information for the selected type and month. Tabs The web page has two tabs: Public Holidays and Optional Holidays. - Public Holidays Tab : Displays information about public holidays.   - Co...