HTML
चयन मेनू नियंत्रण

वाक्य - विन्यास

• <select name=""></select>
• <datalist id=""></datalist>
• <optgroup label="Option Group"></optgroup>
• <option value="">Option</option>

मेनू चुनें

<select> तत्व एक ड्रॉप-डाउन मेनू बनाता है जिसमें से उपयोगकर्ता एक विकल्प चुन सकता है।

<select name="">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>

आकार बदलना

आप size विशेषता के साथ चयन मेनू का आकार बदल सकते हैं। 0 या 1 का आकार मानक ड्रॉप-डाउन शैली मेनू प्रदर्शित करता है। 1 से अधिक आकार एक ड्रॉप-डाउन को एक बॉक्स में प्रदर्शित करेगा जो कि कई लाइनों को प्रदर्शित करता है, जिसमें उपलब्ध विकल्पों के माध्यम से स्क्रॉल करने के लिए प्रति पंक्ति एक विकल्प और एक स्क्रॉलबार होता है।

<select name="" size="4"></select>

बहु-विकल्प चयन मेनू

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

<select name="" multiple></select>

multiple विशेषता का उपयोग करते समय, आकार के लिए 0 और 1 का उपयोग करने के बीच अंतर होता है, जबकि विशेषता का उपयोग नहीं करते समय कोई अंतर नहीं होता है। 0 का उपयोग करने से ब्राउज़र को प्रोग्राम करने के लिए जो भी डिफ़ॉल्ट तरीके से व्यवहार करना होगा। 1 का उपयोग करने से स्पष्ट रूप से परिणामी बॉक्स का आकार केवल एक पंक्ति उच्च पर सेट हो जाएगा।

विकल्प समूह

आप एक विकल्प मेनू के भीतर अपने विकल्पों को बड़े पैमाने पर समूहित कर सकते हैं ताकि <optgroup> तत्व का उपयोग करके विकल्पों की एक लंबी सूची में अधिक संरचित लेआउट प्रदान कर <optgroup> ।

सिंटैक्स बहुत बुनियादी है, केवल समूह के लिए शीर्षक की पहचान करने के लिए एक label विशेषता वाले तत्व का उपयोग करके, और उस समूह के भीतर होने वाले शून्य या अधिक विकल्पों से युक्त होना चाहिए।

<select name="">
  <option value="milk">Milk</option>
  <optgroup label="Fruits">
    <option value="banana">Bananas</option>
    <option value="strawberry">Strawberries</option>
  </optgroup>
  <optgroup label="Vegetables" disabled>
    <option value="carrot">Carrots</option>
    <option value="zucchini">Zucchini</option>
  </optgroup>
</select>

विकल्प समूहों का उपयोग करते समय, सभी विकल्पों को एक समूह में शामिल करने की आवश्यकता नहीं होती है। साथ ही, एक विकल्प समूह को अक्षम करना समूह के भीतर सभी विकल्पों को अक्षम कर देगा, और किसी अक्षम समूह के भीतर एक विकल्प को मैन्युअल रूप से फिर से सक्षम करना संभव नहीं है।

विकल्प

चयन मेनू के अंदर विकल्प हैं कि उपयोगकर्ता का चयन क्या होगा। एक विकल्प के लिए सामान्य वाक्यविन्यास इस प्रकार है:

<option>Some Option</option>

हालांकि, यह ध्यान रखना महत्वपूर्ण है कि <option> तत्व के अंदर का पाठ हमेशा उपयोग नहीं किया जाता है, और अनिवार्य रूप से उन विशेषताओं के लिए डिफ़ॉल्ट मान बन जाता है जो निर्दिष्ट नहीं हैं।

विकल्प की वास्तविक उपस्थिति और कार्य को नियंत्रित करने वाले गुण value और label । लेबल उस पाठ का प्रतिनिधित्व करता है जिसे ड्रॉप-डाउन मेनू में प्रदर्शित किया जाएगा (जो आप देख रहे हैं और उसे चुनने के लिए क्लिक करेंगे)। मान उस पाठ का प्रतिनिधित्व करता है जिसे फ़ॉर्म सबमिशन के साथ भेजा जाएगा। यदि इनमें से कोई भी मान छोड़ा जाता है, तो यह तत्व के बदले पाठ का उपयोग मूल्य के रूप में करता है। इसलिए हमने ऊपर जो उदाहरण दिया है, उसका "विस्तार" किया जा सकता है:

<option label="Some Option" value="Some Option">

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

<option value="option1">Some Option</option>

डिफ़ॉल्ट रूप से एक विकल्प का चयन करना

आप selected विशेषता को संलग्न करके मेनू में चयनित होने के लिए एक निश्चित विकल्प भी निर्दिष्ट कर सकते हैं। डिफ़ॉल्ट रूप से, यदि मेनू में चयनित के रूप में कोई विकल्प निर्दिष्ट नहीं किया गया है, तो मेनू का पहला विकल्प गाया जाने पर चुना जाएगा। यदि एक से अधिक विकल्प में selected विशेषता संलग्न है, तो विशेषता के साथ मेनू में मौजूद अंतिम विकल्प डिफ़ॉल्ट रूप से चयनित होगा।

<option value="option1" selected>Some option</option>

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

<select multiple>
  <option value="option1" selected>Some option</option>
  <option value="option2" selected>Some option</option>   
</select>

Datalist

<datalist> टैग <input> तत्व के लिए पूर्व-परिभाषित विकल्पों की एक सूची निर्दिष्ट करता है। यह <input> तत्वों पर एक "स्वत: पूर्ण" सुविधा प्रदान करता है। उपयोगकर्ता लिखते समय विकल्पों की एक ड्रॉप-डाउन सूची देखेंगे।

<input list="Languages">

<datalist id="Languages">
  <option value="PHP">
  <option value="Perl">
  <option value="Python">
  <option value="Ruby">
  <option value="C+">
</datalist>

ब्राउज़र का समर्थन