选择选项显示在窗口外

Question

是否可以隐藏窗口内的选择选项？ IE，FF，Chrome的行为方式相同

溢出：隐藏不起作用。

Answer 1

我认为你无能为力。

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

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

类似

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

或者您可以使用divs创建自己的选择：）

可能使用第三方stylish dropdowns。

请参阅此fiddle，这是一个丑陋的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 autocomplete或类似的选项将选项设置为div，然后它将保留在窗口内。