Javascript `select` 标签的占位符？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8368847/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
A Placeholder for the `select` tag?
提问by Ricardo
I'm wondering how to achieve the placeholdereffect with the selecttag, it would be really nice to have the default selected option something like "Please Chose an Option:".
我想知道如何placeholder使用select标签实现效果，拥有“请选择一个选项：”之类的默认选择选项会非常好。
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)
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)
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?
两者都不起作用，也许有一种 jQuery 方法可以做到这一点？
Quick edit:I DON'T want to just disable one of the options and make it selectedbecause it will still be showed in the drop-down list with the other items.
快速编辑：我不想只禁用其中一个选项并启用它，selected因为它仍会与其他项目一起显示在下拉列表中。
回答by Lachlan Arthur
Here's two types of placeholder, re-selectable and hidden:
这是两种类型的占位符，可重新选择的和隐藏的：
Demo: http://jsfiddle.net/lachlan/FuNmc/
演示：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:
CSS 更改第一项的颜色：
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:
和一个小的 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');
Inspiration:
https://stackoverflow.com/a/5805194/1196148- re-selectable placeholder
https://stackoverflow.com/a/8442831/1196148- hidden placeholder
灵感：
https: //stackoverflow.com/a/5805194/1196148- 可重新选择的占位符
https://stackoverflow.com/a/8442831/1196148- 隐藏的占位符
回答by Luciano Mammino
I've built a simple demo by following @Truth suggestion: http://jsfiddle.net/6QnXF/
我按照@Truth 的建议构建了一个简单的演示：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.
我希望这个对你有用。
回答by Madara's Ghost
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.
据我所知，单独使用 HTML 无法做到这一点（尽管这很好。）您可以使用选定的选项来伪造它（我知道您不想要它，但这可能是唯一的方法）。选择另一个选项后，您可以将其删除。
回答by Dormouse
My guess is that you're going to have to construct your own workaround for a select box. Something like a series of divs that act as options which when clicked are shown and have their value inserted into a hidden input field.
我的猜测是您将不得不为选择框构建自己的解决方法。像一系列div的东西，它用作单击时的选项，并将其值插入隐藏的输入字段。
