Skip to main content

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;

    }

    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>

 

Dependent Dropdown

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

Popular posts from this blog

Story of the Nilavanti Granth

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

How to Make $20 a Day Online: Quick and Easy Methods

Making $20 a day online is an achievable goal if you’re willing to put in some effort and choose the right methods. Here are some effective ways to start earning money online: 1. Freelancing Freelancing is a popular way to earn money online. If you have skills in areas like writing, graphic design, programming, or digital marketing, you can offer your services on freelance platforms such as Upwork, Fiverr, or Freelancer. By taking on small projects, you can quickly start earning and potentially reach your $20-a-day goal. Tips for Success: - Create a compelling profile showcasing your skills and past work. - Start with lower rates to build up your portfolio and client base. - Deliver high-quality work to receive positive reviews and secure more projects. 2. Online Surveys Participating in online surveys is an easy way to earn some extra cash. Several legitimate websites, like Swagbucks, Survey Junkie, and Vindale Research, offer payment for your opinions on various topics. While it migh...
Post a Comment
Read more

वीर्यरक्षा के उपाय

  सादा रहन – सहन बनायें काफी लोगों को यह भ्रम है कि जीवन तड़क – भड़कवाला बनाने से वे समाज में विशेष माने जाते हैं । वस्तुतः ऐसी बात नहीं है । इससे तो केवल अपने अहंकार का ही प्रदर्शन होता है । लाल रंग के भड़कीले एवं रेशमी कपड़े नहीं पहनो । तेल – फुलेल और भाँति – भाँति के इत्रों का प्रयोग करने से बचो । जीवन में जितनी तड़क – भड़क बढ़ेगी , इन्द्रियाँ उतनी चंचल हो उठेंगी , फिर वीर्यरक्षा तो दूर की बात है । इतिहास पर भी हम दृष्टि डालें तो महापुरुष हमें ऐसे ही मिलेंगे , जिनका जीवन प्रारंभ से ही सादगीपूर्ण था । सादा रहन – सहन तो बडप्पन का द्योतक है । दूसरों को देख कर उनकी अप्राकृतिक व अधिक आवश्यकताओंवाली जीवन शैली का अनुसरण नहीं करो । उपयुक्त आहार ईरान के बादशाह बहमन ने एक श्रेष्ठ वैद्य से पूछा : “ दिन में मनुष्य को कितना खाना चाहिए ? ” “ सौ दिराम ( अर्थात् 31 तोला ) | “ वैद्य बोला | “ इतने से क्या होगा ? ” बादशाह ने फिर पूछा । वैद्य ने कहा : “ शरीर के पोषण के लिये इससे अधिक नहीं चाहिए | इससे अधिक जो कुछ खाया जाता है , वह केवल बोझा ढोना है और आयुष्य खोना है । ” लोग स्वाद के लिये अपने पेट क...
Post a Comment
Read more

What is the difference between an apk and an aab file?

Difference between apk and aab files can be a great way to share your knowledge and experience with React Native development. Here are some tips and steps to help you write a blog post that is informative, engaging, and SEO-friendly. 1. Choose a catchy title that summarizes the main point of your blog post and includes relevant keywords. For example, you could use something like "APK vs AAB: What You Need to Know About Android App Bundles in React Native". 2. Write an introduction that hooks the reader's attention and explains why they should care about the topic. You can also provide some background information on apk and aab files, such as their definitions, benefits, and drawbacks. For example, you could start with something like "If you're a React Native developer, you might have heard of Android App Bundles (AAB), the new format for publishing apps on the Google Play Store. But what exactly are AAB files and how do they differ from the traditional APK files?...
Post a Comment
Read more

वीर्य कैसे बनता है

वीर्य शरीर की बहुत मूल्यवान् धातु है । भोजन से वीर्य बनने की प्रक्रिया बड़ी लम्बी है | श्री सुश्रुताचार्य ने लिखा है : रसाद्रक्तं ततो मांसं मांसान्मेदः प्रजायते | मेदस्यास्थिः ततो मज्जा मज्जायाः शुक्रसंभवः ॥ जो भोजन पचता है , उसका पहले रस बनता है । पाँच दिन तक उसका पाचन होकर रक्त बनता है । पाँच दिन बाद रक्त में से मांस , उसमें से 5-5 दिन के अंतर से मेद , मेद से हड्डी , हड्डी से मज्जा और मज्जा से अंत में वीर्य बनता है । स्त्री में जो यह धातु बनती है उसे ‘ रज ‘ कहते हैं । वीर्य किस प्रकार छः सात मंजिलों से गुजरकर अपना यह अंतिम रूप धारण करता है , यह सुश्रुत के इस कथन से ज्ञात हो जाता है । कहते हैं कि इस प्रकार वीर्य बनने में करीब 30 दिन व 4 घण्टे लग जाते हैं । वैज्ञनिक लोग कहते हैं कि 32 किलोग्राम भोजन से 700 ग्राम रक्त बनता है और 700 ग्राम रक्त से लगभग 20 ग्राम वीर्य बनता है । आकर्षक व्यक्तित्व का कारण इस वीर्य के संयम से शरीर में एक अदभुत आकर्षक शक्ति उत्पन्न होती है जिसे प्राचीन वैद्य धन्वंतरि ने ‘ ओज ‘ नाम दिया है । यही ओज मनुष्य को अपने परम – लाभ ‘ आत्मदर्शन ‘ कराने में सहायक बनता है ...
Post a Comment
Read more

How to Get a Verified Badge on Instagram

A Step-by-Step Guide: How to Get a Verified Badge on Instagram Introduction: In the vast world of social media, Instagram stands as one of the most popular platforms for individuals and businesses alike. With millions of users, standing out from the crowd can be challenging. However, one way to establish credibility and authenticity is by obtaining a coveted blue verified badge on your Instagram profile. This badge not only enhances your online presence but also helps you gain trust from your audience. In this blog post, we will guide you through the process of obtaining a verified badge on Instagram. Step 1: Understand Instagram's Verification Criteria Before diving into the verification process, it is crucial to understand Instagram's criteria for granting the coveted blue badge. Instagram typically verifies accounts that are of public interest and belong to well-known personalities, celebrities, global brands, public figures, or entities representing specific industries. Acc...
Post a Comment
Read more