“选择”标签的占位符？答案

【问题标题】：A Placeholder for the `select` tag?“选择”标签的占位符？
【发布时间】：2012-01-12 05:18:48
【问题描述】：

我想知道如何使用select 标签实现placeholder 效果，如果有默认选择的选项，比如“请选择一个选项：”，那就太好了。

我尝试了一些变体，但到目前为止它们都不起作用，我确信它可以实现，因为我在某处看到它（不记得在哪里）。

我试过这个：

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

<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 方法可以做到这一点？

快速编辑：我不想只禁用其中一个选项并将其设为selected，因为它仍会与其他项目一起显示在下拉列表中。 p>

【问题讨论】：

已经在这里讨论过：stackoverflow.com/questions/5805059/select-placeholder 还有一个活生生的例子：jsfiddle.net/Zmf6t（无论如何它在 chrome 上效果不佳......）
@FelipeAlsacreations - 我不想那样做，不只是黑白，我可能有与你不同的想法可以实现（我没有要求不可能的事情，我相信它可以做到）或者至少像卢西亚诺和真理建议的那样接近。
具有经过测试和接受的答案的类似问题。 stackoverflow.com/questions/17603055/placeholder-for-select-tag

标签： javascript jquery html css

【解决方案1】：

这里有两种占位符，可重新选择和隐藏：

演示：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改变第一项的颜色：

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

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

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

灵感：
https://stackoverflow.com/a/5805194/1196148 - 可重新选择的占位符
https://stackoverflow.com/a/8442831/1196148 - 隐藏的占位符

【讨论】：

【解决方案2】：

我按照@Truth 的建议构建了一个简单的演示：http://jsfiddle.net/6QnXF/

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

我希望它对你有用。

【讨论】：

胜过真理的暗示
我想这是最接近我想要实现的目标，谢谢！再等一个小时左右选择答案 - 也许有人有完美的解决方案。
Firefox (10) 不会将禁用选项显示为默认选择（占位符），而是显示下一个选项（选项 #1）。
在 IE 9 中相同。默认选择选项 #1，如果我展开下拉列表，默认选项显示为灰色。我认为您还需要将selected="selected" 添加到第一项。

【解决方案3】：

据我所知，仅使用 HTML 是无法做到的（尽管那样会很好。）您可以使用选定的选项来伪造它（我知道您不想要它，但这可能是唯一的方法）。选择另一个选项后，您可以将其删除。

Here's a working example of what I describe.

【讨论】：

感谢您的回答，它看起来不错并且接近预期的结果，但我仍然希望有人有完整的解决方案；）
Chrome 22 以与其他选项相同的颜色显示占位符文本，但 Firefox 14 按预期将占位符文本显示为灰色。

【解决方案4】：

我的猜测是您将不得不为选择框构建自己的解决方法。像一系列div的东西，它作为单击时的选项，并将其值插入隐藏的输入字段。

【讨论】：