javascript 展开时设置 Select 的最大宽度?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/5390956/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 17:02:40  来源:igfitidea点击:

Set max width of Select when it expands?

javascripthtmlcss

提问by Skizit

I've got the following...

我有以下...

http://jsfiddle.net/WvgSw/7/

http://jsfiddle.net/WvgSw/7/

I'd like to set the max width so that when it is expands (when you click it) rather than the menu growing to larger than 180px it remains a max of 180px and the text simply cuts off. How would I achieve this?

我想设置最大宽度,以便在它展开时(当您单击它时)而不是菜单增长到大于 180 像素,它仍然是 180 像素的最大值,并且文本只是被切断。我将如何实现这一目标?

NOTE:I would prefer the markup in Javascript, not CSS. I am aware of max-width in CSS.

注意:我更喜欢 Javascript 中的标记,而不是 CSS。我知道 CSS 中的 max-width 。

回答by Shivkant

Check the following code:

检查以下代码:

Page

    <select id='select' style='max-width:180px;'>
  <option class="maxwidth" value="volvo">Volvo</option>
  <option class="maxwidth" value="saab">Saab</option>
  <option class="maxwidth" value="mercedes">Mercedes</option>
  <option class="maxwidth" value="LARGER THAN 180PX  TEST TEST TEST TEST">LARGER THAN 180PX  TEST TEST TEST TE</option>
</select>

CSS

CSS

.maxwidth
{
    max-width:100px;
}

I have updated the code on the link you have provided.

我已经更新了您提供的链接上的代码。

http://jsfiddle.net/WvgSw/347/

http://jsfiddle.net/WvgSw/347/

Note: please mark the correct answer and Vote For it.

注意:请标记正确答案并为它投票。

回答by anothershrubery

As far as I know you cannot limit the width of the drop down of a regular selectcontrol. You will need to use custom controls, either built by yourself or using other packages.

据我所知,您不能限制常规select控件下拉的宽度。您将需要使用自定义控件,可以是自己构建的,也可以是使用其他包的。

DevExpress, and probably the likes of Infragistics, provides this functionality.

DevExpress,可能还有 Infragistics 之类的,提供了这个功能。

回答by Amrish

Try setting the width of the select box to auto

尝试将选择框的宽度设置为自动

menu.style.width = "auto";

This way it wont expand when you click it, but it wont cut off the largest entry.

这样当您单击它时它不会扩展,但它不会切断最大的条目。

~Amrish

~阿姆瑞什