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

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

例如，如果我有以下几点：

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

然后我的下拉列表将与第二选择“萨博”为所选值4个不同的选项。

现在，当用户点击下拉箭头时，他们会将萨博视为顶部的选定值，然后再次查看所有4个选项，并重新列出萨博。

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

来源

2014-05-19 Juan Velez

为什么必须坚持开发打破用户已经习惯有东西在过去的20多年工作的方式吗？ –

不是单独使用HTML，而是想使用JavaScript之类的东西，或者使用像PHP这样的服务器语言。它可以根据数据库中存储的值自动关闭。 –

你可以用这个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>

然而，用户体验可能会造成混乱，所以三思而后行，如果你真的需要这种行为。

:checked在IE9 +中支持伪类。

来源

2014-05-19 22:19:15 dfsq

+1，以便花时间带出jsfiddle。 – karlipoppins

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

哦，是的，那个jsfiddle的东西很酷！再次感谢！ –

好了，你可以做到这一点使用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

来源

2014-05-19 22:20:06 Runcorn

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

回答

相关问题