ड्रॉपडाउन सूची में रिक्त आइटम के बिना रिक्त HTML का चयन करें

110

कैसे लागू करें सबज?

जब मैं लिखता हूँ:

<form>
  <select>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

तब डिफ़ॉल्ट चयनित आइटम "आआआ" है

जब मैं लिखता हूँ:

<form>
  <select>
     <option value=""></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

तब डिफ़ॉल्ट चयनित आइटम रिक्त है, लेकिन यह रिक्त आइटम ड्रॉप डाउन में प्रस्तुत करता है।

मैं डिफ़ॉल्ट रिक्त मान के साथ चयन टैग को कैसे लागू कर सकता हूं जो ड्रॉपडाउन सूची में छिपा हुआ है?

html select drop-down-menu

— निक स्टावरोगिन
स्रोत

रिक्त के रूप

— ब्लेज़ेमॉन्गर

182

बस विकलांग और / या छिपी विशेषताओं का उपयोग करें:

<option selected disabled hidden style='display: none' value=''></option>

selected इस विकल्प को डिफ़ॉल्ट बनाता है।
disabled इस विकल्प को अकल्पनीय बनाता है।
style='display: none'यह विकल्प पुराने ब्राउज़रों में प्रदर्शित नहीं होता है। देखें: क्या मैं छिपी हुई विशेषता के लिए प्रलेखन का उपयोग कर सकता हूं ।
hidden यह विकल्प ड्रॉप-डाउन सूची में प्रदर्शित नहीं होने देता है।

— एडुआर्डो
स्रोत

3

वास्तव में IE 11 "छिपा हुआ" विकल्प प्रदर्शित करता है।

— एडवर्ड ओलिमिसन

6

वेबकिट 'छिपी हुई' विशेषता का समर्थन करने के लिए प्रतीत नहीं होता है

— एथन रीसोर

2

जैसा कि कैन आई यूज़ में बताया गया है , यह hiddenविशेषता प्रभावी रूप display: noneसे पुरानी ब्राउजरों का समर्थन करने के लिए है:<option selected disabled hidden style='display: none' value=''></option>

— नेटा

66

आप सेटिंग से कर सकते हैं selectedIndexकरने के लिए -1उपयोग करते हुए .prop: http://jsfiddle.net/R9auG/ ।

पुराने jQuery के संस्करणों के लिए .attrइसके बजाय का उपयोग करें .prop: http://jsfiddle.net/R9auG/71/ ।

— pimvdb
स्रोत

@ क्रॉनिक मफिन: धन्यवाद; बस परीक्षण किया और वास्तव में सभी मुख्यधारा ब्राउज़रों पर काम करने लगता है।

— pimvdb

@zobidafly: संपादन के लिए धन्यवाद; मैंने थोड़ा विस्तार किया है।

— pimvdb

1

.attrनए jQuery के संस्करणों में विफल हो जाएगा। स्मार्ट बनने की कोशिश ने मुझे असफल बना दिया।

— कार्सन आईपी

33

बस का उपयोग कर

<option value="" selected disabled>Please select an option...</option>

स्क्रिप्ट के बिना कहीं भी काम करेगा और आपको उसी समय उपयोगकर्ता को निर्देश देने की अनुमति देगा।

— mvreijn
स्रोत

25

<select>
     <option value="" style="display:none;"></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>

— एंड्री आर
स्रोत

1

ff / chrome - ok, opera / ie7-9 - not ok आप परीक्षण कर सकते हैं कि यहाँ (js के साथ या बिना): jsfiddle.net/R9auG/145 इसलिए मैं @pimvbb द्वारा js-approach की सिफारिश करता हूँ

— tibalt

11

सादे जावास्क्रिप्ट का उपयोग करके इसे करने का एक सरल तरीका यहां दिया गया है। यह pimvdb द्वारा पोस्ट की गई jQuery स्क्रिप्ट के समान है। आप इसे यहाँ परीक्षण कर सकते हैं ।

<script type='text/javascript'>
  window.onload = function(){
    document.getElementById('id_here').selectedIndex = -1;
  }
</script>

।

<select id="id_here">
  <option>aaaa</option>
  <option>bbbb</option>
</select>

फॉर्म में और जावास्क्रिप्ट में "id_here" मेल सुनिश्चित करें।

— मिंगवेई शमूएल
स्रोत

3

आप नहीं कर सकते। वे बस उस तरह से काम नहीं करते हैं। एक ड्रॉप डाउन मेनू में हर समय चयनित विकल्पों में से एक होना चाहिए।

आप बदलाव की घटना के लिए देख सकते हैं (हालांकि मैं इसकी सलाह नहीं देता) फिर भी रिक्त होने पर पहले विकल्प को हटाने के लिए JS का उपयोग करें।

— क्वेंटिन
स्रोत

3

आप इस व्यवहार की अनुशंसा क्यों नहीं करते?

— जोश नू

ऐसे बहुत सारे मामले हैं, जहाँ आप चाहते हैं कि उपयोगकर्ता सक्रिय रूप से किसी सूची से कुछ उठाएँ। मुझे नहीं लगता कि जेएस ऐसा करने का सबसे इष्टतम तरीका है (हालांकि यह एकमात्र तरीका लगता है), लेकिन मुझे वास्तव में लगता है कि एक रास्ता होना चाहिए ।

— qwerty

2

विशुद्ध रूप से html @isherwood के लिए एक महान समाधान है। JQuery के लिए, अपनी चुनिंदा ड्रॉप डाउन आईडी दें और फिर इसे jQuery के साथ चुनें:

<form>
  <select id="myDropDown">
    <option value="0">aaaa</option>
    <option value="1">bbbb</option>
  </select>
</form>

फिर पृष्ठ लोड पर ड्रॉप डाउन को साफ़ करने के लिए इस jQuery का उपयोग करें:

$(document).ready(function() {
    $('#myDropDown').val(''); 
});

या इसे किसी फंक्शन के अंदर रखें:

$('#myDropDown').val('');

यह निर्धारित करता है कि आप क्या खोज रहे हैं और इसे ऐसे कार्यों में लगाना आसान है जो आपके पेज पर कॉल किए जा सकते हैं यदि आपको पेज को फिर से लोड किए बिना ड्रॉप डाउन खाली करने की आवश्यकता है।

— जेसन स्लोबोट्स्की
स्रोत

0

आप इस स्निपेट को ट्राई कर सकते हैं

$("#your-id")[0].selectedIndex = -1

इसने मेरे लिए काम किया।

— Shenbag
स्रोत

1

एक स्पष्ट विवरण प्रदान करने के लिए उत्तर के साथ एक jsfiddle.net प्रदान करना सबसे अच्छा होगा ।

— बेनामी

1

यह मानता है कि ओपी jQuery का उपयोग कर रहा है।

— उत्तानमर्फी