javascript - 如何将固定宽度选择框的下拉菜单向左而不是向右扩展？

Question

我有这个代码：http: //jsfiddle.net/9pyh2/

<style type="text/css">
   select {width:200px;}
</style>

<form>
   <select><option value="">Choose one</option>
      <option>First choice</option>
      <option>Second choice</option>
      <option>Really long third choice that makes the dropdown expand etc etc etc etc etc</option>
   </select>
</form>

当有一个很长的选项时，是否可以使下拉菜单向左而不是向右扩展？

Answer 1

可能的解决方案

如果您愿意绝对定位您的选择菜单，您可以使用以下技术。

这是一个working example.

代码

将元素包装在相对定位的父元素中：

<form class="relative">
  <select class="ddm">
    <option value="1">Fly</option>
    <option value="2">Lizard</option>
    <option value="3">Snake</option>
  </select>
</form>

并应用以下样式：

.relative { position: relative; }

.ddm {
  position: absolute;
  top: 0;
  right: 0;
}

这将允许选择菜单仅向左扩展。