html - 当我打开选择框的下拉菜单时，如何显示我的选项的更多信息？

Question

在我的选择框中，我只想显示所选值，例如 Volvo。仅当我单击选择框并且带有选项的下拉菜单可见时，我才想显示所有信息 Volvo(颜色:黄色，奖金:2000 欧元)。这可能吗？

 <select>
  <option value="green">Volvo (color: yellow, prize: 2000 Euro)</option>
  <option value="saab">Saab (color: red, prize: 4000 Euro)</option>
  <option value="mercedes">Mercedes (color: blue, prize: 3000 Euro)</option>
  <option value="audi">Audi (color: green, prize: 5000 Euro)</option>
</select> 

默认情况下，选择框应如下所示: http://www.fotos-hochladen.net/view/bildschirmfoto01wtm72krs.png

如果我单击该框，它应该如下所示:

http://www.fotos-hochladen.net/view/bildschirmfotoeaoi6tnsy7.png

Answer 1

这是全新的解决方案。所有过去的解决方案都被删除。

有 Fiddle example ...

现在，有一个 div 容器。容器内部是一个用于显示结果的 div 和根据点击显示或隐藏的 select。

select 是隐藏的，当您点击 div 以获取结果时，select 将被显示。如果您再次单击，select 将隐藏。当您点击某个值时，js 将仅提取汽车名称并显示在结果 div 中。