Question

我想知道是否有可能使当前的选择＆＃34;值在我的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个不同的选项与第二个选项＆＃34; Saab＆＃34;是选定的值。

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

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

Answer 1

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

＆＃13;

option:checked {
    display: none;
}

＆＃13;

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

＆＃13;

但是，用户体验可能会让人感到困惑，所以如果您真的需要这种行为，请三思而后行。

IE9 +支持

:checked伪类。

Answer 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

在html选择/下拉列表中显示“选定”值不可见

2 个答案: