2

Didn't how to put this question... How can I show a descrition / deafukt value without it being an options.

Eg:

    <select class="form-control">
            <option value="">Choose a Number...</option>
            <option value="two">Two</option>
            <option value="three">Three</option>
            <option value="four">Four</option>
            <option value="five">Five</option>
    </select>

How to show "Choose a Number" in unselected mode but not have it as an option. Like dropdown should show only the options which can be selected.

Debajyoti Das
  • 2,038
  • 4
  • 34
  • 66
  • possible duplicate of [ – BENARD Patrick Oct 20 '14 at 13:14
  • You should think that after a person has selected something then they won't be able to reset the value... which sounds a bit like bad UX. – Daniel Oct 20 '14 at 13:24
  • But then selecting an option is mandatory... @Daniel – Debajyoti Das Oct 21 '14 at 07:02
  • 1
    @DebajyotiDas people usually use other type of user engagement, like nice UI validations (less aggressive). Use a label that says "Choose a number" and next to it render your dropdown – Daniel Oct 21 '14 at 07:17

1 Answers1

3

The select tag doesn't come with a placeholder attribute. To work around that you can do the following:

HTML:

<select>
    <option class="hidden_option" selected disabled>Choose a number</option>
    <option>1</option>
    <option>2</option>
</select>

CSS:

select > option.hidden_option{
    display: none;
}

This way you can make a pseudo-placeholder that will not be listed as an option.

Here is a JsFiddle demo for you to see it in action

henser
  • 3,307
  • 2
  • 36
  • 47