select html 自动弹出,HTMLselect：如何设置默认文本不会显示在下拉列表中？

我有一个解决scheme，select上面显示的跨度，直到完成select。 跨度显示默认消息，因此它不在命题列表中：

HTML：

Default message Option 1Option 2Option 3

CSS：

#default_message_overlay { position: absolute; display: block; width: 120px; color: grey; } select { width: 150px; }

Javascript(与JQuery)：

$(document).ready(function() { // No selection at start $('#my_select').prop("selectedIndex", -1); // Set the position of the overlay var offset = $('#my_select').offset(); offset.top += 3; offset.left += 3; $('#default_message_overlay').offset(offset); // Remove the overlay when selection changes $('#my_select').change(function() { if ($(this).prop("selectedIndex") != -1) { $('#default_message_overlay').hide(); } }); });

我已经做了一个演示的jsfiddle 。 经过Firefox和IE8testing。