डिफ़ॉल्ट पाठ जो ड्रॉप-डाउन सूची में नहीं दिखाया जाएगा

Question

मेरे पास एक selectप्रारंभिक भाषा है, जब तक उपयोगकर्ता भाषा का चयन नहीं करता है, तब तक भाषा का चयन करें । जब उपयोगकर्ता चयन खोलता है, तो मैं नहीं चाहता कि वह एक भाषा का चयन करें , क्योंकि यह एक वास्तविक विकल्प नहीं है।

इसे कैसे प्राप्त किया जा सकता है?

Answer 1

काइल के समाधान ने मेरे लिए पूरी तरह से ठीक काम किया इसलिए मैंने किसी भी जेएस और सीएसएस से बचने के लिए अपना शोध किया, लेकिन सिर्फ HTML के साथ चिपका रहा। selectedजिस आइटम को हम हेडर के रूप में प्रदर्शित करना चाहते हैं, उसके मूल्य को जोड़कर उसे पहले स्थान पर एक प्लेसहोल्डर के रूप में दिखाने के लिए मजबूर करता है। कुछ इस तरह:

<option selected disabled>Choose here</option>

पूरा मार्कअप इन पंक्तियों के साथ होना चाहिए:

<select>
    <option selected disabled>Choose here</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

आप इस बेला पर एक नज़र डाल सकते हैं , और यहाँ परिणाम है:

यदि आप नहीं चाहते हैं कि उपयोगकर्ता द्वारा चयनित बॉक्स पर क्लिक करने के बाद प्लेसहोल्डर टेक्स्ट को एक बार विकल्पों में सूचीबद्ध किया hiddenजाए, तो इस तरह की विशेषता जोड़ें :

<select>
    <option selected disabled hidden>Choose here</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

चेक बेला यहाँ और नीचे स्क्रीनशॉट।

Comments

यह एक शानदार उत्तर है लेकिन जब कोणीय जेएस का उपयोग करते हैं, तो यह काम नहीं करता है क्योंकि कोणीय स्वचालित रूप से एक खाली विकल्प जोड़ता है और इसे डिफ़ॉल्ट के रूप में सेट करता है

— डेनिस वन्योनी

वैसे भी, केवल संदर्भ के लिए, यहां आप कोणीय में क्या करेंगे, बस ऊपर दिए गए दृष्टिकोण को जोड़ दें, जो कि कोणीय विशिष्ट के साथ यहां बताया गया है metaltoad.com/blog/…

— नोबिता

ध्यान दें कि ऊपर दिए गए उत्तर में उपयोग की जाने वाली hiddenविशेषता , एक विशेषता है जो किसी भी HTML तत्व पर सेट की जा सकती है, और आमतौर पर display: noneCSS के साथ सेटिंग के बराबर होने के लिए लागू की जाती है (लेकिन आवश्यक नहीं) ।

— मार्क अमेरी

यह भी ध्यान रखें कि स्थापना के hiddenएक पर optionएक में selectसफारी में काम नहीं करता है, या तो आईओएस या मैक पर। इस प्रकार यह उत्तर केवल आंशिक ब्राउज़र समर्थन प्रदान करता है।

— मार्क अमेरी

ये सुन्दर है!

— फिबो कोवल्स्की

Answer 2

यहाँ समाधान है:

<select>
    <option style="display:none;" selected>Select language</option>
    <option>Option 1</option>
    <option>Option 2</option>
</select>

Comments

ध्यान दें कि selected="true"अमान्य है। इसके बजाय, selected="selected"(X) HTML या केवल HTML में उपयोग करें selected। ऐसा लगता है कि आप संपत्ति के selectedसाथ भ्रमित होने की विशेषता रखते selectedहैं, जिसे इस प्रकार बदल दिया जाता है: myOption.selected = true;याmyOption.selected = false;

— ओरोल

"प्रदर्शन: कोई नहीं" एंड्रॉइड और आईओएस जैसे डिवाइस-देशी चयन का उपयोग करने वाले ब्राउज़रों द्वारा अनदेखा किया जाता है। आपको select.focus में DOM से विकल्प को हटाना होगा और इसे वापस करना होगा और इसे काम करने के लिए select.blur में चुनना होगा।

— राडेक पीच

-1; की तरह का उपयोग कर Nobita के जवाबhidden (है जो "आम तौर पर सीएसएस में लागू" का उपयोग कर display: noneकिसी भी तरह) का उपयोग कर display: noneएक पर optionसफारी में काम नहीं करता है, विकल्प अभी भी दिखाई देता है।

— मार्क अमेरी

Answer 3

प्लेसहोल्डर लेबल विकल्प का उपयोग उचित और शब्दार्थ तरीके से करता है :

• optionके पहले बच्चे के रूप में एक तत्व जोड़ेंselect
• उस पर सेट करेंvalue= ""option
• उस की सामग्री के रूप में प्लेसहोल्डर पाठ सेट करें option
• में requiredविशेषता जोड़ेंselect

यह उपयोगकर्ता को फ़ॉर्म सबमिट करने में सक्षम होने के लिए एक अन्य विकल्प का चयन करने के लिए बाध्य करेगा, और ब्राउज़र को वांछित के रूप में प्रस्तुत करना चाहिए option:

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

हालांकि, अधिकांश ब्राउज़र इसे एक सामान्य के रूप में प्रस्तुत करेंगे option। इसलिए हमें निम्नलिखित को जोड़कर इसे मैन्युअल रूप से ठीक करना होगा option:

• selectedविशेषता, इसे बनाने के लिए चयनित डिफ़ॉल्ट रूप से
• disabledविशेषता, उपयोगकर्ता द्वारा यह गैर चयन बनाने के लिए
• display: none, मूल्यों की सूची से इसे छिपाने के लिए

select > .placeholder {
  display: none;
}

<select required>
  <option class="placeholder" selected disabled value="">Select language</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

Comments

यह ध्यान दिया जाना चाहिए कि यहां तक ​​कि यह (जो यहां सभी उत्तरों में से इस समस्या को हल करने का सबसे गहन प्रयास है) सफारी पर काम नहीं करता है, या तो आईओएस या मैक पर। विकल्प अभी भी खोला जाएगा जब चयन खोला जाता है।

— मार्क अमेरी

@MarkAmery मेरा सुझाव है कि आप ऐसा करते हैं जैसे कि यह @Nobita उत्तर में प्रस्तावित है और hiddenइसके स्थान पर प्लेसहोल्डर विकल्प टैग में विशेषता जोड़ें display: noneक्योंकि ऐसा लगता है कि अधिकांश मोबाइल ब्राउज़र display: noneCSS विशेषता को अनदेखा करते हैं और यह मेरी राय में और भी अधिक सही है।

— गाबिको 1

@ Gaboik1 उस उत्तर पर टिप्पणियों में, मैंने नोट किया कि hiddenआम तौर पर display: noneहुड के तहत लागू किया जाता है (और कल्पना स्पष्ट रूप से इसे "विशिष्ट" कार्यान्वयन के रूप में दर्शाती है )। जैसे, मुझे आश्चर्य होगा अगर कोई ब्राउज़र था - मोबाइल या अन्यथा - जहां hiddenकाम किया लेकिन display: noneनहीं किया। क्या आप कोई उदाहरण दे सकते हैं?

— मार्क अमेरी

Answer 4

क्योंकि आप selectटैग के लिए प्लेसहोल्डर्स का उपयोग नहीं कर सकते हैं , मुझे विश्वास नहीं है कि शुद्ध HTML / CSS के साथ जो आप पूछ रहे हैं, वही करने का कोई तरीका है। हालाँकि, आप ऐसा कुछ कर सकते हैं:

<select>
  <option disabled="disabled">Select language</option>
  <option>Option 1</option>
</select>

ड्रॉपडाउन में "सेलेक्ट लैंग्वेज" दिखाई देगी, लेकिन एक बार दूसरा विकल्प चुने जाने के बाद इसे रिजेक्ट करना संभव नहीं होगा।

मुझे आशा है कि वह मदद करेंगे।

Comments

मैंने पाया कि सबसे अच्छा विकलांगों का संयोजन है और शैली के साथ चुना गया है = "प्रदर्शन: कोई नहीं;"। विकलांग तब उपयोगी होता है जब आप सत्यापन करना चाहते हैं - यह सुनिश्चित करता है कि आपके पास डिफ़ॉल्ट रूप से चयनित कोई सक्षम विकल्प नहीं है।

— इलारियन कोवलचुक

-1 क्योंकि अन्य उत्तर यहाँ (विशेष रूप से न्योलिया और ओरोल के) दोनों अधिक व्याख्यात्मक विवरण और बहुत अधिक पूर्ण समाधान प्रदान करते हैं।

— मार्क अमेरी

Answer 5

इसे इस्तेमाल करे:

<div class="selectSelection">
    <select>
        <option>Do not display</option>
        <option>1</option>
        <option>1</option>
    </select>
</div>

CSS में:

.selectSelection option:first-child{
    display:none;
}

Comments

इस उत्तर में ऐसा कुछ भी नहीं है जो अन्य उत्तरों में अधिक विस्तार से नहीं है, साथ ही इसमें खराब स्वरूपण भी है; -1।

— मार्क अमेरी

Answer 6

मेरे पास चयन के ऊपर प्रदर्शित अवधि के साथ एक समाधान है जब तक कि एक चयन नहीं किया जाता है। अवधि डिफ़ॉल्ट संदेश प्रदर्शित करता है, और इसलिए यह प्रस्ताव की सूची में नहीं है:

HTML:

<span id="default_message_overlay">Default message</span>
<select id="my_select">
    <option value="1">Option 1</option>  
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

सीएसएस:

#default_message_overlay {
    position: absolute;
    display: block;
    width: 120px;
    color: grey;
}
select {
    width: 150px;
}

जावास्क्रिप्ट (JQuery के साथ):

$(document).ready(function() {
    // No selection at start
    $('#my_select').prop("selectedIndex", -1);

    // Set the position of the overlay
    var offset = $('#my_select').offset();
    offset.top += 3;
    offset.left += 3;
    $('#default_message_overlay').offset(offset);

    // Remove the overlay when selection changes
    $('#my_select').change(function() {
        if ($(this).prop("selectedIndex") != -1) {
            $('#default_message_overlay').hide();
        }
    });
});

मैंने डेमो के लिए jsfiddle बनाया है । फ़ायरफ़ॉक्स और IE8 के साथ परीक्षण किया गया।

Comments

OSX पर Chrome हमेशा पहले चयनित विकल्प को दिखाता है, लेकिन यह OSX विशिष्ट प्रतीत होता है, क्योंकि यहां दिए गए सभी समाधान चयनित दृश्यमान पहले विकल्प को जन्म देते हैं।

— गामाडिल

इसके बजाय spanउपयोग में है legendऔर वह सही होगा याlabel

— karlcow

यह एक दिलचस्प दृष्टिकोण है, और एकमात्र संभव तरीका है जिसे मैं सफारी पर काम करने के लिए इस व्यवहार को प्राप्त करने के लिए देखता हूं, लेकिन यह बुरी तरह से यहां लागू है; pointer-events: noneक्लिकों को चुनने के लिए क्लिक करने की अनुमति देने के लिए आपको कम से कम अपनी अवधि की आवश्यकता है ।

— मार्क अमेरी

Answer 7

<option value="" id="ddl" name="prop" style="display:none;" disabled selected>chose something </option>

यदि आप चाहें तो आप सीएसएस को एक सीएसएस फ़ाइल में स्थानांतरित कर सकते हैं, और escफिर से अक्षम का चयन करने के लिए बटन को पकड़ने के लिए एक स्क्रिप्ट डाल सकते हैं। मेरे द्वारा डाले गए अन्य समान उत्तरों के विपरीत value="", यह ऐसा है यदि आप अपनी चयनित सूची का मान किसी प्रपत्र के साथ भेजते हैं, तो इसमें "कुछ चुना गया" नहीं होगा। Asp.net mvc 5 में भेजे गए json के रूप में संकलित किया गया var obj = { prop:$('#ddl').val(),...};और JSON.stringify(obj);प्रोप का मान शून्य होगा।

Answer 8

OP1:

$("#MySelectid option").each(function () {
        if ($(this).html() == "text to find") {
            $(this).attr("selected", "selected");
            return;
        }
});

Op2:

$('#MySelectid option')
.filter(function() { return $.trim( $(this).text() ) == 'text to find'; })​​​​​​​​.attr('selected','selected');​​​​​​​