下拉菜单未锚定在字段下方

Question

我有以下非常基本的代码：

＆＃13;

＆＃13;

<select id="dir">
        <option value="N">N</option>
        <option value="S">S</option>
        <option value="E">E</option>
        <option value="W">W</option>
</select>

＆＃13;

＆＃13;

＆＃13;

我的系统使用IE显示HTML。在显示的页面中：

• 加载页面时，字段中显示的初始值为 N 。
• 我点击该字段。出现下拉菜单，其中 N 选项悬停在该字段上。 S ， E ＆amp; W 选项低于字段。
• 我点击了S.下拉菜单消失了，字段中显示的值现在是 S 。
• 我再次点击该字段。出现下拉菜单，其中 S 选项悬停在该字段上。 N 选项高于字段，而 E ＆amp; W 选项仍然 字段
。

这不是我期望的下拉菜单显示方式。如何更改代码，以便整个下拉菜单在显示时都 字段，既不会部分悬停在字段上也不会高于字段？

Answer 1

这是下拉选择的正常行为。

如果你想要它，否则你必须自己在javascript / jquery中构建它或者寻找一个jquery插件。

您必须删除所选选项上方的选项，然后再重新添加。您可以使用onchange处理程序。

如上所述 - 这是正常的行为，即使你不期望它。