रिक्त के रूप में डिफ़ॉल्ट चयन विकल्प

Question

मेरे पास एक बहुत ही अजीब आवश्यकता है, जिसमें मुझे HTML में ड्रॉप डाउन मेनू में डिफ़ॉल्ट रूप से चयनित कोई विकल्प नहीं होना चाहिए। तथापि,

मैं इसका उपयोग नहीं कर सकता,

<select>
  <option></option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

क्योंकि, इसके लिए पहले विकल्प को संभालने के लिए मुझे सत्यापन करना होगा। किसी को भी वास्तव में चयन टैग के भाग के रूप में पहला विकल्प सहित इस लक्ष्य को प्राप्त करने में मेरी मदद कर सकते हैं?

Comments

जहां तक ​​मुझे पता है कि यह एक खाली लाइन पाने का एकमात्र तरीका है। आपका क्या मतलब है कि आपको सत्यापन करना होगा? यदि मान = "" कहने के लिए बस एक चेक सेट किया गया है तो झूठा वापस करें।

— रॉबर्ट

यह एक ड्रॉपडाउन के बजाय रेडियो बटन का उपयोग करने का एक अच्छा अवसर होगा।

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

मेरी राय में, एक अजीब आवश्यकता नहीं है। मैं एक ही नाव में हूं। मुझे 'नो ऑप्शन' डिफॉल्ट की जरूरत है। मेरे पास कई ड्रॉप डाउन हैं जिन्हें फॉर्म जमा करने की आवश्यकता नहीं है। इस तरह से उन्हें अक्षम करने से उपयोगकर्ता को तब चयन करने से रोकता है जब यह उचित नहीं होता है। अच्छा प्रश्न! +1

— स्कॉट

एक अजीब आवश्यकता नहीं है, अगर चयन की एक आवश्यक विशेषता थी तो प्लेसहोल्डर लेबल विकल्प होने के लिए HTML5 dev.w3.org/html5/spec-preview/…

— Testo Testini

यदि आपके पास 3 या 4 से अधिक है तो @Bazemonger रेडियो बटन एक भयानक विचार है। 15+ विकल्प या 50 या अधिक के साथ ड्रॉपडाउन सूची की कल्पना करें? उन कई मामलों में अपने स्वयं के डिजाइन मुद्दों है, लेकिन समस्या अभी भी खड़ा है कि रेडियो बटन अच्छी तरह पैमाने पर नहीं है सब पर ।

— टाइलर

Answer 1

शायद यह मददगार होगा

<select>
    <option disabled selected value> -- select an option -- </option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

-- select an option --डिफ़ॉल्ट रूप से प्रदर्शित किया जाएगा। लेकिन यदि आप एक विकल्प चुनते हैं, तो आप इसे वापस नहीं चुन पाएंगे।

आप खाली जोड़कर भी इसे छिपा सकते हैं option

<option style="display:none">

इसलिए यह अब सूची में दिखाई नहीं देगा।

विकल्प 2

यदि आप CSS लिखना नहीं चाहते हैं और उपरोक्त समाधान के समान व्यवहार की अपेक्षा करते हैं, तो बस उपयोग करें:

<option hidden disabled selected value> -- select an option -- </option>

Comments

यहाँ ऊपर की एक JSFiddle है , अगर किसी को इसकी आवश्यकता है।

— उवे कीम

@Rerael_Mori के रूप में @azerafati ने बताया कि आप "हिडन" विशेषता का उपयोग करके उसी को संग्रहीत कर सकते हैं, इसलिए आवश्यक सीएसएस की आवश्यकता है। बस शुद्ध एचटीएमएल 5;)<option hidden disabled selected value> -- select an option -- </option>

— ब्रेनऑवरफ्लो

क्या होगा अगर मैं इसे वापस चुनने में सक्षम होना चाहता हूं? मैं अभी कुछ भी नहीं भेजना चाहता। क्या यह संभव है?

— माइकल रोजर्स

विकल्प तत्व में एक छिपी हुई विशेषता जोड़ने से मेरे लिए जादू हो गया! यह आसान होने की उम्मीद नहीं थी। धन्यवाद

— एस। डोमेंग

ज्ञात हो, छिपी हुई विशेषता और प्रदर्शन शैली दोनों IE में काम नहीं करते हैं, यहां तक ​​कि 11. stackoverflow.com/questions/58862242/…

— yatskovsky

Answer 2

आप इसे प्राप्त करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं। निम्नलिखित कोड आज़माएं:

एचटीएमएल

<select id="myDropdown">      
    <option>Option 1</option>     
    <option>Option 2</option>     
    <option>Option 3</option>     
</select> 

जे एस

document.getElementById("myDropdown").selectedIndex = -1;

या JQuery

$("#myDropdown").prop("selectedIndex", -1);

Comments

यह समाधान आंशिक रूप से Chrome 35 के साथ काम करता है: ड्रॉपडाउन किसी भी चयन को नहीं दिखाता है जब विकल्प की सूची अदृश्य होती है, लेकिन विकल्पों की सूची दिखाई देने पर पहले चयनित विकल्प को दिखाता है। सफारी 7 का व्यवहार वैसे ही है जैसा कि अभीष्ट है।

— फ्लोटकिलिलोच

दिलचस्प बात यह है: यह HTML फॉर्म सत्यापन के साथ काम करता है। यदि आप तत्व requiredपर विशेषता का उपयोग करते हैं selectऔर एक विकल्प का चयन किए बिना सबमिट करते हैं तो फॉर्म विफल हो जाएगा और आपको बताएगा, आपको एक चयन करना होगा। इसलिए मुझे वास्तव में यह दृष्टिकोण पसंद है। (कम से कम क्रोम में परीक्षण किया गया)

— एंड्रियास लिनर्ट

काम नहीं करता है (कम से कम वर्तमान ब्राउज़रों में इस लेखन के रूप में - और अनावश्यक रूप से जावास्क्रिप्ट पर निर्भर करता है।

— सिल्टमाउथ

2019 तक, केवल सफारी आईओएस 10 इस के साथ गेंद खेलने से इनकार करता है

— अय्याश

Answer 3

आज (2015-02-25)

यह HTML5 मान्य है और सर्वर को रिक्त (स्थान नहीं) भेजता है:

<option label=" "></option>

पर वैधता सत्यापित http://validator.w3.org/check

Win7 (IE11 IE10 IE9 IE8 FF35 Safari5.1) के साथ सत्यापित व्यवहार Ubuntu14.10 (Chrome40, FF35) OSX_Yosemite (Safari8, Chrome40) Android (Samsung-Galaxy-S5)

निम्नलिखित भी आज सत्यापन से गुजरता है , लेकिन कुछ प्रकार के अंतरिक्ष चरित्र भी गुजरता है, अधिकांश ब्राउज़रों से सर्वर (शायद वांछनीय नहीं) और दूसरों पर रिक्त (Chrome40 / लिनक्स एक रिक्त पास):

<option>&#160;</option>

इससे पहले (2013-08-02)

मेरे नोट्स के अनुसार, ऊपर दिखाए गए विकल्प टैग के अंदर गैर-ब्रेकिंग-स्पेस इकाई ने 2013 में निम्नलिखित त्रुटि उत्पन्न की:

त्रुटि: W3C मार्कअप वैलिडटन सेवा (सार्वजनिक): एक आवश्यक तत्व के साथ और एक से अधिक गुण के बिना एक चयनित तत्व का पहला बच्चा विकल्प तत्व, और जिसका आकार 1 है, में या तो एक खाली मूल्य विशेषता होनी चाहिए, या कोई पाठ सामग्री नहीं होनी चाहिए।

उस समय, एक नियमित स्थान XHTML4 मान्य था और हर ब्राउज़र से सर्वर को एक रिक्त (स्थान नहीं) भेजा जाता था:

<option> </option>

भविष्य

यदि स्पष्ट रूप से रिक्त विकल्प की अनुमति देने के लिए अद्यतन किया गया था, तो यह मेरे दिल को खुश कर देगा। अधिमानतः संक्षेप वाक्य रचना का उपयोग करना। निम्नलिखित में से कोई भी महान होगा:

<option />
<option></option>

परीक्षण फ़ाइल

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Test</title>
</head>
<body>
  <form action="index.html" method="post">
    <select name="sel">
      <option label=" "></option>
    </select>
  </form>
</body>
</html>

Answer 4

<td><b>Ação da atividade:</b><br>
	<select style='align:left; width:100%;' id='cbxTipoSFA' name='cbxTipoSFA'>
	<option hidden selected>Selecione uma opção</option>
	<option value='Instalação'>Instalação</option>
	<option value='Solicitação'>Solicitação</option>
	<option value='Retirada'>Retirada</option></select>
</td>

केवल "छिपाया" विकल्प पर रखें जिसे आप ड्रॉपडाउन सूची में छिपाना चाहते हैं।

Answer 5

समाधान जो केवल CSS का उपयोग करके काम करता है:

एक: इनलाइन सीएसएस

<select>
    <option style="display:none;"></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

बी: सीएसएस स्टाइल शीट

यदि आपके पास सीएसएस फ़ाइल है, तो आप पहले optionका उपयोग करके लक्ष्य कर सकते हैं :

select.first-opt-hidden option:first-of-type {
  display:none;
}

<select class="first-opt-hidden">
    <option></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

Answer 6

यह मदद करनी चाहिए:

https://www.w3schools.com/tags/att_select_required.asp

 <form>
 <select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button type="submit">Submit</button>
</form>

Comments

यह इस आवश्यकता को प्राप्त करने का सबसे आधुनिक (html5) तरीका है, ध्यान रहे इसके लिए एक प्रकार = सबमिट बटन की आवश्यकता होती है। ओनक्लिक सबमिट हैंडलर के साथ एक प्रकार = बटन को उपयोगकर्ता को चयन करने के लिए स्वचालित रूप से आवश्यकता नहीं होती है।

— अर्जन

Answer 7

<select required>
  <option value="" disabled selected>None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

आप इस मामले में कस्टम सत्यापन से बच सकते हैं।

Answer 8

बस एक छोटी सी टिप्पणी:

कुछ सफ़ारी ब्राउज़र न तो "छिपी" विशेषता का सम्मान करते हैं और न ही शैली सेटिंग "प्रदर्शन: कोई नहीं" (MacOS 10.12.6 के तहत Safari 12.1 के साथ परीक्षण)। एक स्पष्ट प्लेसहोल्डर पाठ के बिना, ये ब्राउज़र विकल्पों की सूची में एक खाली पहली पंक्ति दिखाते हैं। इसलिए इस "डमी" प्रविष्टि के लिए हमेशा कुछ व्याख्यात्मक पाठ प्रदान करना उपयोगी हो सकता है:

<option hidden disabled selected value>(select an option)</option>

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

Answer 9

मैं समझता हूं कि आप क्या करने की कोशिश कर रहे हैं। सबसे अच्छा और सबसे सफल तरीका है:

<select name='department' required>
   <option value="">None</option>
   <option value="Teaching">Teaching department</option>
   <option value="nonTeaching">Non-teaching department</option> 
</select>

Answer 10

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

बिना किसी और हलचल के, नीचे दिए गए कोड के टुकड़े देखें:

<select>
 <option value data-isdefault="true">--Choose one Option--</option>
 <option>Option 1</option>
 <option>Option 2</option>
 <option>Option 3</option>
</select>

इसके साथ, यह अन-सबमिटेबल लेकिन सेलेक्टेबल, कभी भी रहेगा। यूजर इंटरफेस के लिए अधिक सुविधा और उपयोगकर्ता अनुभव के लिए महान।

खैर यह सब है, मुझे आशा है कि यह मदद करता है। चीयर्स!

Comments

इसे प्रस्तुत करने में असमर्थ होने पर भी ड्रॉपडाउन पर उपयोगकर्ता का ध्यान आकर्षित करना निरर्थक लगता है, लेकिन मुझे सुझाव पसंद है

— Iofacture

@ लॉफ़ैक्ट्योर: इनपुट के लिए धन्यवाद। वास्तव में, मेरे द्वारा लिखा गया कोड वह था जिसे मैं चाह रहा था, लेकिन हां जैसा कि आपने कहा, यह उपयोगकर्ता / मालिक की जरूरतों पर निर्भर करता है

— farisfath25

Answer 11

कोई HTML समाधान नहीं है। HTML 4.01 कल्पना के द्वारा, ब्राउज़र व्यवहार अपरिभाषित है यदि किसी भी optionतत्व की selectedविशेषता नहीं है, और जो ब्राउज़र व्यवहार में करते हैं, वह यह है कि वे पहले विकल्प को पूर्व-चयनित बनाते हैं।

एक वर्कअराउंड के रूप में, आप selectतत्व का एक सेट input type=radio(उसी nameविशेषता के साथ) तत्व बदल सकते हैं । यह अलग-अलग उपस्थिति और उपयोगकर्ता इंटरफ़ेस के साथ एक ही तरह का नियंत्रण बनाता है। यदि किसी भी input type=radioतत्व की checkedविशेषता नहीं है, तो उनमें से कोई भी प्रारंभ में अधिकांश आधुनिक ब्राउज़रों में नहीं चुना गया है।

Answer 12

मैं Laravel 5 फ्रेमवर्क का उपयोग कर रहा हूं और @Gambi के उत्तर ने मेरे लिए भी काम किया है लेकिन अपनी परियोजना के लिए कुछ बदलावों के साथ।

मेरे पास डेटाबेस तालिका में विकल्प मान हैं और मैं उन्हें फ़ॉरच स्टेटमेंट के साथ उपयोग करता हूं। लेकिन बयान से पहले मैंने @Gambit सुझाई गई सेटिंग्स के साथ एक विकल्प जोड़ा है और यह काम किया है।

यहाँ मेरी छूट है:

@isset($keys)
  <select>
    <option  disabled selected value></option>
    @foreach($keys as $key)
      <option>{{$key->value)</option>
    @endforeach
  </select>
@endisset 

मुझे उम्मीद है कि यह किसी को भी मदद करता है। अच्छा काम करते रहें!

Answer 13

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

<h2>Favorite color</h2>
<select name="color">
<option value=""></option>
<option>Pink</option>
<option>Red</option>
<option>Blue</option>
</select>

ड्रॉप डाउन में पहला विकल्प रिक्त होगा।

Answer 14

दिखाने के लिए कृपया ड्रॉप डाउन में एक मान चुनें और कुछ मूल्य के चयन के बाद इसे छिपा दें। कृपया नीचे दिए गए कोड का उपयोग करें।

यह आवश्यक सत्यापन का भी समर्थन करेगा।

<select class="form-control" required>
<option disabled selected value style="display:none;">--Please select a value</option>
              <option >Data 1</option>
              <option >Data 2</option>
              <option >Data 3</option>
</select>

Answer 15

यदि आप कोणीय (2+), (या किसी अन्य ढांचे) का उपयोग कर रहे हैं, तो आप कुछ तर्क जोड़ सकते हैं। तर्क यह होगा: यदि उपयोगकर्ता अभी तक किसी अन्य का चयन नहीं करता है तो केवल एक खाली विकल्प प्रदर्शित करें। इसलिए उपयोगकर्ता द्वारा एक विकल्प चुने जाने के बाद, खाली विकल्प गायब हो जाता है।

कोणीय (9) के लिए यह कुछ इस तरह दिखेगा:

<select>
    <option *ngIf="(hasOptionSelected$ | async) === false"></option>
    <option *ngFor="let option of (options$ | async)[value]="option.id">{{ option.title }}</option>
</select>

Answer 16

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

<select>
    <option value="">&nbsp;
    <option>Option 1
    <option>Option 2
    <option>Option 3
</select>

HTML5 में मान्य है। requiredचुनिंदा तत्व में विशेषता के साथ काम करता है । फिर से चुना जा सकता है। Google Chrome 45, इंटरनेट एक्सप्लोरर 11, एज, फ़ायरफ़ॉक्स 41 में काम करता है।