html - Select options appear outside the window

Question

Is it possible to hide select options inside the window? IE, FF, Chrome behave the same way

overflow:hidden doesn't work.

Answer 1

我认为您对此无能为力。

或者，您可以根据最长的选项增加下拉菜单的宽度

或者您可以剪切最长选项的文本，使其变小。

就像是

$('select option').each(function(a,b){
    if(b.value.length > 10){
      b.text= b.text.substring(0, 10)+ a+ '..';
    }
});

或者您可以创建自己的选择，使用divs:)

可能使用第三方时尚下拉菜单。

看看这个小提琴，我用了一个丑陋的 5 分钟实现了这样的下拉菜单，即

创建这样的标记：

<ul class="parent">
    <li>---Select---</li>
</ul>
<ul class="option" >
    <li>this is a long option</li>
    <li>this is a even long option</li>
    <li>this is a very long option</li>
    <li>this is a very long option</li>
    <li>this is a very long option</li>
    <li>this is a very long option</li>
</ul>

并通过 css 和 jquery 美化它

Answer 2

我认为您不能使用 css 来防止它像那样超出浏览器窗口。（我不积极）。

但是，您可以使用jquery ui 自动完成或类似的东西，将选择选项设置为 div，然后它将保留在窗口内。