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

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

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

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

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

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

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

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

एक सेलेक्ट, एक पैराग्राफ और एक बटन दिया गया है। बटन पर क्लिक करने पर सूची के चयनित आइटम का टेक्स्ट पैराग्राफ में प्रदर्शित करें।

2020 से 2030 तक वर्षों की एक ड्रॉपडाउन सूची बनाएं। सूची के किसी भी आइटम को चुनने पर एक संदेश प्रदर्शित करें कि यह वर्ष लीप वर्ष है या नहीं।