使“选定”值在 html 选择/下拉列表中不可见答案

【问题标题】：Make "selected" value not visible in html select/dropdown list使“选定”值在 html 选择/下拉列表中不可见
【发布时间】：2015-10-13 14:42:46
【问题描述】：

我想知道是否可以使当前的“选定”值在我的 html 下拉列表中不可见。

例如，如果我有以下情况：

<select>
  <option value="volvo">Volvo</option>
  <option value="saab" selected>Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

然后我的下拉列表将包含 4 个不同的选项，其中第二个选项“Saab”是选定的值。

按原样，当用户单击下拉箭头时，他们将在顶部看到 Saab 作为选定值，然后再次列出 Saab 的所有 4 个选项。

是否有可能使当他们单击下拉列表时，他们只会看到一次 Saab（作为选定值），然后是当前未选择的其他 3 个选项，而不是显示 Saab 两次？

【问题讨论】：

为什么开发人员必须坚持打破用户在过去 20 多年中的习惯？
不仅仅使用 HTML，您还想使用 JavaScript 之类的东西，或者 PHP 之类的服务器语言。它可以根据数据库中存储的值自动关闭。

标签： html

【解决方案1】：

您可以使用以下 CSS 样式来实现它：

option:checked {
    display: none;
}

<select>
    <option value="volvo">Volvo</option>
    <option value="saab" selected>Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

但是，用户体验可能会变得混乱，所以如果您真的需要这种行为，请三思。

IE9+支持:checked伪类。

【讨论】：

正是我需要的。我正在使用 php 在 HTML 的末尾添加选定的值（来自数据库），因此它在下拉列表中出现了两次。（我知道必须有更好的方法来做到这一点，但这是我现在所拥有的）使用您提供的代码，它对用户来说仍然看起来很正常，而不是看到 Duplicate 值。
哦，是的，jsfiddle 的东西太酷了！再次感谢！

【解决方案2】：

好的，你可以使用 jQuery 来做到这一点

<select id="dropDown">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>


$("#dropDown").on("change",function(){
    $(this).find("option").show();
    $("option:selected", $(this)).hide();
});

这里是jsFiddle

【讨论】：