चयन के आधार पर ड्रॉपडाउन को पॉप्युलेट करना

कई ड्रॉपडाउन के साथ फॉर्म विकसित करते समय, विकल्पों को एक ड्रॉपडाउन में पॉप्युलेट करना फायदेमंद हो सकता है। दूसरे में किया गया चयन. यह विकल्पों को सीमित करके और डेटा इनपुट को अधिक कुशल बनाकर अधिक उपयोगकर्ता-अनुकूल अनुभव की अनुमति देता है।

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

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 
यह जावास्क्रिप्ट फ़ंक्शन दो पैरामीटर लेता है, डीडीएल1 और डीडीएल2, जो दो ड्रॉपडाउन का प्रतिनिधित्व करते हैं। यह पहले उन विकल्पों के साथ सरणियों को आरंभ करता है जो प्रत्येक ड्रॉपडाउन में प्रदर्शित किए जाएंगे।
इसके बाद, डीडीएल1 में किए गए चयन को संभालने के लिए एक स्विच स्टेटमेंट का उपयोग किया जाता है। डीडीएल1 के मान के आधार पर, यह डीडीएल2 में विकल्पों को साफ़ करता है और इसे उपयुक्त विकल्पों से भर देता है। createOption फ़ंक्शन का उपयोग प्रत्येक विकल्प को ddl2 में बनाने और जोड़ने के लिए किया जाता है। (यह,document.getElementById('ddl2'))">
  विकल्प>
  रंगविकल्प>
  आकारविकल्प>
  नामविकल्प>
चयन करें>


जब उपयोगकर्ता ddl1 में एक विकल्प चुनता है, तो ऑनचेंज ईवेंट configDropDownLists फ़ंक्शन को ट्रिगर करता है, जो तदनुसार ddl2 में विकल्पों को अपडेट करता है। यह दृष्टिकोण चयन के आधार पर एक ड्रॉपडाउन को दूसरे में भरने का एक सुविधाजनक तरीका प्रदान करता है, जिससे फॉर्म की उपयोगिता बढ़ जाती है।