javascript - 将标签放在选择上并在单击时打开选择

Question

我正在尝试创建一个与 GMail 中显示的相同的下拉效果。当您单击标签时，应该会打开一个下拉菜单，用户应该能够选择值。

我认为可以通过在选择上对齐标签/div 来实现，这样只有允许的选择可见，并且当用户单击标签或箭头时，下拉菜单应该打开。此外，标签值不应在下拉列表中可见。

有任何通过 css 或 JavaScript 的帮助吗？

Answer 1

我认为 jquery .click() 处理程序可以提供帮助，但没有! :(((

于是我找到了唯一的办法:

<style>
  div {display:inline-block; position:relative;}
  div select {position: absolute; left:0px; top:0px; width:100%; height:100%; opacity:0; cursor:pointer;}
</style>
<div>
  label text here
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</div>

结果 - 您单击某个标签，标准选择框打开。而且根本没有 JS ;)