जावास्क्रिप्ट में ड्रॉपडाउन सूचियों के साथ कार्य

इस पाठ में, हम select टैग के साथ कार्य का अध्ययन करेंगे, जो एक ड्रॉपडाउन सूची का प्रतिनिधित्व करता है। यदि आप HTML पर इस टैग के साथ काम करना नहीं जानते हैं, तो सबसे पहले इस लिंक पर हैंडबुक में इसके डिवाइस का अध्ययन करें: select।

आइए देखें कि जावास्क्रिप्ट के माध्यम से इस टैग के साथ कैसे काम किया जाए। मान लीजिए कि हमारे पास इस प्रकार की एक ड्रॉपडाउन सूची दी गई है:

html<select id="select">
  <option>one</option>
  <option selected>two</option>
  <option>three</option>
</select>

चलिए एक चर में सेलेक्ट का लिंक प्राप्त करते हैं:

javascriptlet select = document.querySelector('#select');

अब चलिए सेलेक्ट में परिवर्तन होने पर सूची के चयनित आइटम का टेक्स्ट स्क्रीन पर प्रिंट करते हैं। इसके लिए हमें अपने सेलेक्ट की value प्रॉपर्टी को पढ़ना होगा:

javascriptselect.addEventListener('change', function(){
  console.log(this.value);
});