“select”标签的占位符？
我想知道如何通过select标签实现placeholder效果，如果有默认选择选项，例如“请选择一个选项：”，这将非常好。
我尝试了一些变化，他们不工作到目前为止，我敢肯定，它可以实现，因为我看到它的某个地方（不记得在哪里）。
我试过这个：
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方法来做到这一点？
快速编辑：我不想只是禁用其中一个选项，并selected它，因为它仍然会显示在下拉列表中与其他项目。
这里有两种类型的占位符，可重新选择和隐藏：
演示：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 - 隐藏的占位符
我通过遵循@Truth建议构建了一个简单演示：http://jsfiddle.net/6QnXF/
(function($){
$('#myAwesomeSelect').change(function(){
if( !$(this).data('removedPlaceHolder'))
{
$(this).find('option:first').remove();
$(this).data('removedPlaceHolder', true);
}
});
})(jQuery);
我希望这个对你有用。
据我所知，单独使用HTML无法做到这一点（尽管这很好）。你可以用选择的选项（我知道你不需要它，但它可能是唯一的方法）伪造它。 一旦选择了另一个选项，您可以将其删除。
这是我描述的一个工作示例。
链接地址: http://www.djcxy.com/p/70595.html