A Placeholder for the `select` tag?

I'm wondering how to achieve the placeholder effect with the select tag, it would be really nice to have the default selected option something like "Please Chose an Option:".

I have tried some variations and they are not working so far and I'm sure that it can be achieved cause i seen it somewhere (can't remember where).

I have tried this:

1)

<fieldset>
            <select data-placeholder="Please select a product" id="s1" class="global">
                <option value="Some">Some</option>
                <option value="Slower">Slower</option>
                <option value="Slow">Slow</option>
                <option value="Fast">Fast</option>
                <option value="Faster">Faster</option>
            </select>
</fieldset>

2)

<fieldset>
            <select id="s1" class="global">
                <option data-placeholder="true"  value="Some">Some</option>
                <option value="Slower">Slower</option>
                <option value="Slow">Slow</option>
                <option value="Fast">Fast</option>
                <option value="Faster">Faster</option>
            </select>
</fieldset>

Both are not working, maybe there is a jQuery method to make that?

Quick edit: I DON'T want to just disable one of the options and make it selected because it will still be showed in the drop-down list with the other items.

---

Here's two types of placeholder, re-selectable and hidden:

Demo: http://jsfiddle.net/lachlan/FuNmc/

Re-selectable placeholder:

<select>
    <option value="" selected>Please select</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>

Hidden placeholder:

<select class="empty">
    <option value="" selected disabled>Please select</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>

CSS to change the colour of the first item:

select option { color: black; }
select option:first-child { color: grey; }
select.empty { color: grey; }
/* Hidden placeholder */
select option[disabled]:first-child { display: none; }

And a little jQuery to toggle the font-color after selection:

// Applies to all select boxes that have no value for their first option
$("select:has(option[value=]:first-child)").on('change', function() {
    $(this).toggleClass("empty", $.inArray($(this).val(), ['', null]) >= 0);
}).trigger('change');

Inspiration:
https://stackoverflow.com/a/5805194/1196148 - re-selectable placeholder
https://stackoverflow.com/a/8442831/1196148 - hidden placeholder

---

I've built a simple demo by following @Truth suggestion: http://jsfiddle.net/6QnXF/

(function($){
    $('#myAwesomeSelect').change(function(){
       if( !$(this).data('removedPlaceHolder'))
       {
          $(this).find('option:first').remove();
          $(this).data('removedPlaceHolder', true); 
       }
    });
})(jQuery);

I hope it works for you.

---

As far as I know, there's no way doing it with HTML alone (though that would be nice.) You can fake it with a selected option (I know you don't want it, but it's probably the only way). Once another option is selected, you can remove it.

Here's a working example of what I describe.

链接地址: http://www.djcxy.com/p/70596.html

上一篇: Angular 2，将默认值设置为选择选项

下一篇: “select”标签的占位符？