`select`标记的占位符？ [英] A Placeholder for the `select` tag?

问题描述

我想知道如何使用 select 标记来实现占位符效果，具有默认选择的选项像请选择一个选项：。

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

我试过这个：

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>

两者都不工作，也许有一个jQuery方法来做？

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:

演示： http://jsfiddle.net/lachlan/FuNmc/

可重新选择的占位符：

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

隐藏的占位符：

<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可更改第一个项目的颜色：

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

有一个jQuery在选择后切换字体颜色：

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');

灵感：

http://stackoverflow.com/a/5805194/1196148 - 可重新选择的占位符

http://stackoverflow.com/a/8442831/1196148 - 隐藏占位符

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

这篇关于`select`标记的占位符？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！