Removing a "default"

Question

Here is my select box:

<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>

I want the Pick a choice! option to be removed when the user click on the select box. If the user click anywhere else, the Pick a choice! option come back. I don't want the user to be able to pick the Pick a choice! option. What should I do?

You'll need to use JavaScript. You may wish to consider using a JS library, such as [tag:jquery], [tag:mootools], [tag:scriptaculous]... — David Thomas, Jan 31 '12 at 19:28
Duplicate of http://stackoverflow.com/questions/5805059/select-placeholder ?? — craig1231, Jan 31 '12 at 19:29
Why not just use the HTML tag? It would say "Pick a choice!" but it can't be selected. No JavaScript needed. — j08691, Jan 31 '12 at 20:09

score 9 · Accepted Answer · answered Jan 31 '12 at 19:36

9

Without some PHP or JavaScript to remove the option dynamically you do have another very simple option that I use regularly, this is the disabled="disabled" option. The option will remain but the user won't be able to actually select it.

The failure with this is if someone just submits a form without choosing anything the empty value will submit in the form, but this is where your validation handling comes into play.

Your code for the "Pick a choice!" option will look something like this:

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

I hope it helps.

answered Jan 31 '12 at 19:36

Ryan

1,878
1
14
17

i found this answer earlier, but it isn't enought. "pick a choice!" need to be completely removed i'm trying something in JQuery to put it in display: none; posting answer soon. Thx for your help ! – Charles Lemarier Jan 31 '12 at 19:40
I appreciate the feedback Charles, just a tip for the future, if you're looking for options it is best to list the languages you're working with, preferably listing them in the tags but even written in the question is OK. The reason being is I have a number of solutions with PHP that I can write without thinking, there are others like that with JS and jQuery. Notice how nobody has given you an answer using jQuery - just a comment with the suggestion to try it, it's greatly because you didn't tag it as being acceptable in your answer, plus there is no previous tries shown with jQuery. Good luck – Ryan Feb 01 '12 at 16:19

score 7 · Answer 2 · answered Oct 10 '14 at 03:51

CSS Only Sol'n

So, I know this post is quite old now, but a css only solution wasn't offered... Much more efficient way of accomplishing this. Notice the first <option> doesn't have a value attribute; this allows it to effectively placehold.

#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>

techie_28 · Answer 3 · 2019-02-15T08:29:12.433

1

Try this

$("#SelectID option:first").remove();

edited Feb 15 '19 at 08:29

answered Sep 10 '12 at 04:16

techie_28

2,123
4
41
62

This code is works well as per the OP's question. Do not see any point in the negative vote. – techie_28 Feb 15 '19 at 08:30

score 1 · Answer 4 · answered Dec 19 '12 at 05:33

Here is some workaround. Don't know wether this is suite your requirement.

<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>

Removing a "default" in a select box

4 Answers4

CSS Only Sol'n

Removing a "default"