更改HTML </select>中<select>项的宽度

时间:2011-07-27 10:29:05

标签: javascript jquery html cordova

我是HTML新手,我正在尝试使用phoneGap和jQuery插件构建移动应用。我目前正在使用eclipse编程,在我的应用程序中,我有一个drop dwon菜单(选择),里面有几个项目。我试图改变选择项的宽度,但它不起作用。在这里你可以看到我做了什么来解决这个问题:

<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>

5 个答案:

答案 0 :(得分:5)

$('#date').css('width', 'new_Value');

来自jQuery Mobile Documentation:

刷新选择

如果您通过JavaScript操作选择,则必须在其上调用refresh方法以更新视觉样式。这是一个例子:

var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");

答案 1 :(得分:4)

这是一个有效的示例: http://jsfiddle.net/x472U/

答案 2 :(得分:1)

  $("#date").change(function() {
 $(this).css({'width':'78px'});
  });

来自jqueryMobile文档:

刷新选择

如果您通过JavaScript操作选择,则必须在其上调用refresh方法以更新视觉样式。这是一个例子:

var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");

因此,如果您确实更改了宽度,则仍需要刷新它

答案 3 :(得分:1)

您只需打开选择菜单:

<div id="mySelect">
   <select id="cities">
    ...
   </select>
</div>

然后你可以从javascript或css:

操纵你的选择宽度大小

CSS:

#mySelect{ width: 150px; }

JAVASCRIPT:

$("#mySelect").css({"width":"150px"});

答案 4 :(得分:0)

你所做的是正确的,选择元素宽度要么由其中的选项大小或CSS宽度控制。

基于代码的示例(有效):

http://jsfiddle.net/7Wuq2/