जावास्क्रिप्ट का उपयोग करके दूसरे में चयन के आधार पर एक ड्रॉपडाउन को पॉप्युलेट करें

जब दूसरे में किए गए चयन के आधार पर एक ड्रॉपडाउन में विकल्पों को गतिशील रूप से अपडेट करने के कार्य का सामना करना पड़ता है, तो यह है डेटाबेस क्वेरीज़ जैसी अनावश्यक जटिलताओं से बचने के लिए आवश्यक है। आइए एक सीधे जावास्क्रिप्ट-आधारित समाधान का पता लगाएं जो AJAX कॉल की आवश्यकता के बिना इसे पूरा करता है।

इस दृष्टिकोण को स्पष्ट करने के लिए, एक परिदृश्य पर विचार करें जहां आपके पास दो ड्रॉपडाउन सूचियां हैं: "रंग," "जैसे विकल्पों के साथ ड्रॉपडाउन ए आकृतियाँ," और "नाम" और ड्रॉपडाउन बी। हम ड्रॉपडाउन ए में किए गए चयन के आधार पर ड्रॉपडाउन बी में विकल्पों को पॉप्युलेट करना चाहते हैं।

नमूना कोड

निम्नलिखित जावास्क्रिप्ट फ़ंक्शन दर्शाता है कि कैसे करना है इस कार्यक्षमता को प्राप्त करें:

function configureDropDownLists(ddl1, ddl2) {
  var colours = ['Black', 'White', 'Blue'];
  var shapes = ['Square', 'Circle', 'Triangle'];
  var names = ['John', 'David', 'Sarah'];

  switch (ddl1.value) {
    case 'Colours':
      ddl2.options.length = 0;
      for (i = 0; i 
HTML मार्कअप
निम्नलिखित HTML मार्कअप में दो ड्रॉपडाउन सूचियां शामिल हैं:
ColoursShapesNames
Usage
इस कार्यक्षमता का उपयोग करने के लिए, बस पहला ड्रॉपडाउन (ddl1) और दूसरा ड्रॉपडाउन (ddl2) पास करते हुए, configDropDownLists फ़ंक्शन को कॉल करें। तर्क के रूप में. फ़ंक्शन ड्रॉपडाउन ए में किए गए चयन के आधार पर ड्रॉपडाउन बी की गतिशील आबादी को संभालेगा। , डेटाबेस कॉल या AJAX अनुरोधों की आवश्यकता के बिना।