问题出现的原因是在Firefox和IE9中，``标签的`disabled`属性不会作为默认选择项（placeholder）显示，而是显示下一个选项。解决方法是在第一个选项中添加`selected="selected"`属性。

以下是整理后的文章：

最近我根据一个建议创建了一个简单的示例，链接如下：[http://jsfiddle.net/6QnXF/](http://jsfiddle.net/6QnXF/)。我希望这个示例对你有用。

示例代码如下：

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

这个示例代码相比于Truth的建议更好，我想这是我所尝试实现的最接近的方法了。谢谢！我会再等待一个小时，也许有人有更完美的解决方案。

在Firefox（10）中，禁用的选项不会作为默认选择项（placeholder）显示，而是显示下一个选项（Option #1）。在IE9中也是如此，Option #1被默认选择，并且如果我展开下拉列表，那个默认选项会以灰色显示。我认为你还需要在第一个选项中添加`selected="selected"`属性。

0

匿名的 Posted 2023年6月4日

0 Comments

(A Placeholder for the `select` tag?)这个问题的出现的原因是，当我们使用`

`标签创建下拉菜单时，我们经常需要在默认情况下显示一条提示信息，告诉用户需要选择一个选项。然而，在HTML中，并没有直接支持这样的功能。因此，我们需要通过其他方法来实现这个功能。

为了解决这个问题，我们可以使用两种不同的方法来创建占位符。一种是可重新选择的占位符，另一种是隐藏的占位符。

可重新选择的占位符可以在用户选择了一个选项后重新显示，并且可以再次选择。我们可以通过将一个默认的选项设置为被选中状态来实现这个功能。例如，我们可以在``标签中添加以下代码：

Please select Item 1 Item 2 Item 3

隐藏的占位符在初始状态下被隐藏起来，只有在用户选择了一个选项后才会显示。我们可以通过在``标签中添加一个具有`disabled`属性的``标签来实现这个功能。例如，我们可以在``标签中添加以下代码：

    Please select
    Item 1
    Item 2
    Item 3

为了改变第一项的颜色，我们可以使用CSS来设置样式。我们可以使用以下代码来改变第一项的颜色为灰色：

select option { color: black; }
select option:first-child { color: grey; }
select.empty { color: grey; }

为了在选择后切换字体颜色，我们可以使用jQuery来实现。我们可以使用以下代码来为没有值的第一个选项的所有下拉菜单添加一个`empty`类，并在选择后切换这个类：

$("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/5805194/1196148) - re-selectable placeholder

- [https://stackoverflow.com/a/8442831/1196148](https://stackoverflow.com/a/8442831/1196148) - hidden placeholder

在HTML中，没有一种方法可以实现(A Placeholder for the `select` tag?)，虽然这将是很好的。你可以通过设置一个默认选项来模拟它（我知道你不想要，但这可能是唯一的方法）。一旦选择了另一个选项，你就可以移除它。

但是，Chrome 22显示的占位符文本与其他选项的颜色相同，而Firefox 14则按预期显示灰色的占位符文本。

解决这个问题的方法是使用JavaScript。你可以使用JavaScript来监听select元素的change事件，并在选项改变时切换占位符文本的样式。

下面是一个示例代码，展示了如何使用JavaScript来实现这个功能：

  请选择一个选项
  选项1
  选项2
  选项3

在上面的示例中，我们首先给select元素设置了一个默认选项，其value属性为空并且被禁用和选中。然后，我们通过JavaScript监听select元素的change事件，并根据选项的值来切换占位符文本的颜色。

当选项的值为空时，我们将select元素的颜色设置为灰色；当选项的值发生改变时，我们将select元素的颜色设置为黑色。

通过这种方式，我们可以实现类似占位符文本的效果，并在选项改变时改变占位符文本的样式。