Javascript 更改 HTML 中 <select> 项的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6842865/
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
Changing the width of a <select> item in HTML
提问by S. N
I am new to HTML, and I'm trying to build a mobile app using phoneGap and jQuery plug-in. I am currently programing using eclipse, In my app I have a drop dwon menu (select) with a couple of items in it. I am trying to change the width of the select item, but it doesnt work. here you can see what have i done to solve this:
我是 HTML 新手，我正在尝试使用 phoneGap 和 jQuery 插件构建一个移动应用程序。我目前正在使用 eclipse 进行编程，在我的应用程序中，我有一个下拉菜单（选择），其中包含几个项目。我正在尝试更改选择项的宽度，但它不起作用。在这里你可以看到我做了什么来解决这个问题：
<label for="select-choice-1" class="select">Choose Expiry Date</label>
<select id="date" name="select-choice-1" id="select-choice-1" style="width:150px">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
回答by Semyazas
$('#date').css('width', 'new_Value');
From jQuery Mobile Documentation:
来自 jQuery Mobile 文档：
Refreshing a select
刷新选择
If you manipulate a select via JavaScript, you must call the refresh method on it to update the visual styling. Here is an example:
如果您通过 JavaScript 操作选择，则必须对其调用 refresh 方法以更新视觉样式。下面是一个例子：
var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");
回答by Makram Saleh
Here's a sample that works: http://jsfiddle.net/x472U/
这是一个有效的示例：http: //jsfiddle.net/x472U/
回答by abhijit
$("#date").change(function() {
$(this).css({'width':'78px'});
});
From the jqueryMobile Documentation:
来自 jqueryMobile 文档：
Refreshing a select
刷新选择
If you manipulate a select via JavaScript, you must call the refresh method on it to update the visual styling. Here is an example:
如果您通过 JavaScript 操作选择，则必须对其调用 refresh 方法以更新视觉样式。下面是一个例子：
var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");
So if you do change the width, you still need to refresh it
所以如果你确实改变了宽度，你仍然需要刷新它
回答by BorisD
All you have to do is wrap your select menu:
您所要做的就是包装您的选择菜单：
<div id="mySelect">
<select id="cities">
...
</select>
</div>
Then you can manipulate your select width size from javascript or css:
然后您可以从 javascript 或 css 操作您选择的宽度大小：
CSS:
CSS：
#mySelect{ width: 150px; }
JAVASCRIPT:
爪哇脚本：
$("#mySelect").css({"width":"150px"});
回答by wiifm
Umm what you have done is correct, select element width is either controlled by the size of the option inside it or the CSS width.
嗯，您所做的是正确的，选择元素的宽度要么由其中的选项大小控制，要么由 CSS 宽度控制。
Example based off your code (that works):
基于您的代码的示例（有效）：
