2012-01-31 10 views
9

यहाँ मेरी सलेक्ट बॉक्स है में एक "डिफ़ॉल्ट" एक सलेक्ट बॉक्स

<select id="category"> 
    <option value="">Pick a choice!</option> 
    <option value="">choice1</option> 
    <option value="">choice2</option> 
    <option value="">choice3</option> 
    <option value="">choice4</option> 
</select> 

जब सलेक्ट बॉक्स पर उपयोगकर्ता क्लिक करें। यदि उपयोगकर्ता कहीं और क्लिक करता है, तो Pick a choice! विकल्प वापस आ गया है। मैं नहीं चाहता कि उपयोगकर्ता Pick a choice! विकल्प चुनने में सक्षम हो। मुझे क्या करना चाहिए?

+1

आप जावास्क्रिप्ट का उपयोग करना होगा। आप जेएस लाइब्रेरी का उपयोग करने पर विचार करना चाहेंगे, जैसे कि [टैग: jquery], [टैग: mootools], [टैग: scriptaculous] ... –

+0

आपको इसे प्राप्त करने के लिए कुछ जावास्क्रिप्ट लिखना होगा। –

+0

http://stackoverflow.com/questions/5805059/select-placeholder का डुप्लिकेट ?? – craig1231

उत्तर

4

गतिशील रूप से विकल्प को हटाने के लिए कुछ PHP या जावास्क्रिप्ट के बिना आपके पास नियमित रूप से उपयोग करने वाला एक और बहुत आसान विकल्प है, यह disabled="disabled" विकल्प है। विकल्प रहेगा लेकिन उपयोगकर्ता वास्तव में इसे चुनने में सक्षम नहीं होगा।

इस के साथ विफलता यह है कि अगर कोई भी कुछ भी चुनने के बिना एक फॉर्म सबमिट करता है तो खाली मूल्य फॉर्म में जमा होगा, लेकिन यह वह जगह है जहां आपकी सत्यापन हैंडलिंग खेल में आती है।

"एक विकल्प चुनें" के लिए आपका कोड विकल्प कुछ इस तरह दिखेगा:

<option disabled="disabled">Pick a choice!</option>

मुझे आशा है कि यह मदद करता है।

+0

मुझे पहले यह जवाब मिला, लेकिन यह विचार नहीं किया गया है। "एक विकल्प चुनें!" पूरी तरह से हटाए जाने की आवश्यकता है मैं इसे JQuery में कुछ करने की कोशिश कर रहा हूं ताकि इसे प्रदर्शित किया जा सके: कोई भी नहीं; जल्द ही उत्तर पोस्टिंग। आपकी मदद के लिए Thx! –

+0

मैं प्रतिक्रियाओं की सराहना करता हूं चार्ल्स, भविष्य के लिए सिर्फ एक टिप, यदि आप विकल्पों की तलाश में हैं तो आप जिन भाषाओं के साथ काम कर रहे हैं उन्हें सूचीबद्ध करना सबसे अच्छा है, अधिमानतः उन्हें टैग में सूचीबद्ध करना, लेकिन प्रश्न में भी लिखा गया है ठीक है। कारण यह है कि मेरे पास PHP के साथ कई समाधान हैं जो मैं बिना सोच के लिख सकता हूं, ऐसे ही जेएस और jQuery के साथ अन्य हैं। ध्यान दें कि किसी ने भी jQuery का उपयोग करके आपको कोई जवाब नहीं दिया है - बस कोशिश करने के सुझाव के साथ एक टिप्पणी, यह बहुत है क्योंकि आपने इसे अपने उत्तर में स्वीकार्य नहीं बताया है, साथ ही jQuery के साथ कोई पिछली कोशिश नहीं है। शुभकामनाएं – Ryan

-1

$ ("# चयन आईडी विकल्प: पहले")। हटाएं();

0

यहां कुछ कामकाज है। गीलेर को नहीं पता यह आपकी आवश्यकता है। केवल

<html> 
<head> 
<title>Untitled Document</title> 
<script> 
function doremove() 
{ 

    var obj=document.getElementById("category"); 
    obj.remove(0); 
} 

function addOpt() 
{ 
var obj=document.getElementById("category"); 
var option=document.createElement("option"); 
option.text="Pick a choice!"; 
option.value = 0; 
obj.add(option,1); 
obj.value = 0; 
} 
</script> 
</head> 

<body> 
<select id="category" onfocus="doremove();" onblur="addOpt();"> 
    <option value="0">Pick a choice!</option> 
    <option value="">choice1</option> 
    <option value="">choice2</option> 
    <option value="">choice3</option> 
    <option value="">choice4</option> 
</select> 
<input type="text" /> 
</body> 
</html> 
4

सीएसएस Sol'n


तो, मैं जानता हूँ कि इस पोस्ट अब काफी पुराना है, लेकिन एक सीएसएस एकमात्र समाधान की पेशकश नहीं की थी ... बहुत अधिक कुशल इस को पूरा करने के रास्ते। पहले <option> पर कोई मूल्य विशेषता नहीं है; यह प्रभावी ढंग से प्लेसहोल्ड करने की अनुमति देता है।

#category:focus option:first-of-type { 
 
    display: none; 
 
}
<select id="category"> 
 
    <option>Pick a choice!</option> 
 
    <option value="choice1">choice1</option> 
 
    <option value="choice2">choice2</option> 
 
    <option value="choice3">choice3</option> 
 
    <option value="choice3">choice4</option> 
 
</select>

+0

धन्यवाद। मैंने इस तरह का जवाब नहीं सोचा था। –

+1

आपका स्वागत है, मुझे लगता है। – Todd

संबंधित मुद्दे