एचटीएमएल ड्रॉपडाउन सूची का चयन करें

Question

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

there'a jQuery तरीका यह है, तो यह हो सकता है बहुत उपयोगी

Answer 1

रूप <option value="">- Please select a name -</option> है पहला विकल्प और जावास्क्रिप्ट (और बैकएंड सत्यापन) का उपयोग यह सुनिश्चित करने के लिए करें कि उपयोगकर्ता ने खाली मूल्य के अलावा कुछ और चुना है।

Answer 2

एक जावास्क्रिप्ट नियंत्रण करें कि इससे पहले कि गाल प्रस्तुत कि चुना गया विकल्प आपके पहला विकल्प के लिए अलग है

Answer 3

हो सकता है कि यह आप जावास्क्रिप्ट http://htmlhelp.com/reference/html40/forms/option.html

अक्षम करें देखें विकल्प

Answer 4

सरल बिना हल मदद कर सकते हैं, मुझे लगता है। onclick विशेषता अच्छी तरह से काम करता है ...

<select onchange="if(this.value == '') this.selectedIndex = 1; "> 
    <option value="">Select an Option</option> 
    <option value="one">Option 1</option> 
    <option value="two">Option 2</option> 
</select> 

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

<select> 
    <option value="" disabled="disabled" selected="selected">Please select a name</option> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
</select> 

पृष्ठ लोड हो तो इस विकल्प को डिफ़ॉल्ट रूप से चयनित किया जाएगा:

Answer 5

इस प्रयास करें। हालांकि, जैसे ही ड्रॉप-डाउन क्लिक किया जाता है, उपयोगकर्ता इस विकल्प को फिर से चुनने में सक्षम नहीं होगा।

उम्मीद है कि इससे मदद मिलती है।

Answer 6

यह मैं कैसे JQuery के साथ ऐसा कर रहा है ...

jQuery-वॉटरमार्क प्लगइन (http://code.google.com/p/jquery-watermark/)

$('#inputId').watermark('Please select a name'); 

का उपयोग कर एक जादू की तरह काम करता है!!

उस Google कोड साइट पर कुछ अच्छे दस्तावेज़ हैं।

आशा है कि इससे मदद मिलती है!

Answer 7

<option value="" style="display:none">Choose one provider</option> 

इस तरह से उपयोगकर्ता इस विकल्प को नहीं देख सकता है, लेकिन यह चयन बॉक्स में दिखाता है।

Answer 8

मैं एक पुराने पोस्ट necro लिए माफी चाहता हूँ - लेकिन मैं ऐसा करने का एक बेहतर तरीका मिल गया इस

मैं क्या मानते हैं कि यह पोस्टर चाहता था:

<label for="mydropdown" datalabel="mydropdown">Country:</label>  
<select name="mydropdown"> 
    <option value="United States">United States</option> 
    <option value="Canada">Canada</option> 
    <option value="Mexico">Mexico</option> 
    <option value="Other">Not Listed</option> 
</select> 

मैं एक और पोस्ट थोड़ी देर में यह जानकारी मिली यह एक ही जवाब के लिए खोज - धन्यवाद

Answer 9

<select name="test"> 
    <option hidden="true">Please select a name</option> 
    <option value="Cash">Cash</option> 
    <option value="Draft">Demand Draft No.</option> 
    <option value="Cheque">Cheque No.</option> 
</select> 

Answer 10

यह एक पुरानी पोस्ट है, लेकिन यह मेरे

के लिए काम किया खुला ईवेंट हैंडलर में: 'कोई नहीं प्रदर्शन' और आईडी स्ट्रिंग के लिए जोड़ें '-menu'

<select> 
<option value="" disabled selected>Please select a name...</option> 
<option>this</option> 
<option>that</option> 
</select> 

Answer 11

<select> 
    <option value="" disabled="disabled" selected="selected">Please select name</option> 
    <option value="Tom">Tom</option> 
    <option value="Marry">Marry</option> 
    <option value="Jane">Jane</option> 
    <option value="Harry">Harry</option> 
</select> 

Answer 12

आप jQuery ui को selectmenu नियंत्रण के लिए एक ही हासिल करना चाहते हैं तो आप सेट करना होगा।

<select id="myid"> 
<option value="" disabled="disabled" selected="selected">Please select  name</option> 
<option value="Tom">Tom</option> 
<option value="Marry">Mary</option> 
<option value="Jane">Jane</option> 
<option value="Harry">Harry</option> 
</select> 

$('select#listsTypeSelect').selectmenu({ 
    change: function(event, data) { 
    alert($(this).val()); 
}, 
open: function(event, ui) { 
    $('ul#myid-menu li:first-child').css('display', 'none'); 
} 
}); 

Answer 13

<select> 
    <option value="" disabled selected hidden>Select an Option</option> 
    <option value="one">Option 1</option> 
    <option value="two">Option 2</option> 
</select>