`select`标签的占位符?

我想知道如何使用select标签实现placeholder效果,如果select默认选项,请选择“请选择选项:”。

我已经尝试了一些变化,他们到目前为止还没有工作,我确信它可以实现,因为我在某处看到它(不记得在哪里)。

我试过这个:

1)

 
Some Slower Slow Fast Faster

2)

 
Some Slower Slow Fast Faster

两者都不起作用,也许有一个jQuery方法来做到这一点?

快速编辑:我不想只禁用其中一个选项并将其selected因为它仍然会在下拉列表中显示其他项目。

这里有两种类型的占位符,可重新选择和隐藏:

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

可重新选择的占位符:

  

隐藏占位符:

  

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无法做到这一点(虽然这样会很好。)你可以用选择的选项伪造它(我知道你不想要它,但它可能是唯一的方法)。 选择其他选项后,您可以将其删除。

这是我描述的一个有效例子。

我的猜测是你必须为选择框构建自己的解决方法。 类似于一系列div的东西,它们作为选项显示在点击时显示并将其值插入隐藏的输入字段。