HTML中更改<select>项的宽度

Question

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

- S. N

---

你想让它根据所选选项改变大小吗？ - Makram Saleh

Answer 1

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

来自jQuery Mobile文档：

刷新一个下拉选择框

如果您通过JavaScript操作一个下拉选择框，则必须调用其refresh方法来更新可视化样式。以下是一个示例：

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

- Semyazas

---

你是如何将这个功能添加到你的代码中的？你是如何触发它的？ - Semyazas

我使用您的代码如下：<script type="text/javascript"> YOUR CODE</script> - S. N

那不行，因为a) 你需要使用function(){$('#date').css('width', 'new_Value');}在body的加载时调用它，并且b) 它只会被调用一次。Makram的例子实际上非常精确，完美地解释了你需要做什么。 - Semyazas

当你说foo时，它是否与你之前的回答中的“date”意思相同？ - S. N

在你的情况下，你需要将 $("select#foo") 替换为 $("#date") 或者 $("select#date")。 - Semyazas

Answer 2

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

- Makram Saleh

---

它也没有起作用，你需要知道我正在使用jQuery移动框架！ - S. N

Answer 3

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

来自jqueryMobile文档：

刷新选择器

如果您通过JavaScript操作选择器，则必须调用其刷新方法以更新视觉样式。以下是一个示例：

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

所以，如果您更改了宽度，则仍然需要刷新它

- abhijit

---

按照Semyazas的建议，编写document.ready或函数，并在其中包含js代码。 - abhijit

在 OP 最终清楚地使用 jQuery Mobile 后，问题得以再现。 - Semyazas

Answer 4

你所要做的就是包装你的选择菜单：

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

然后您可以从JavaScript或CSS中操作选择宽度大小：

CSS：

#mySelect{ width: 150px; }

JAVASCRIPT：

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

- BorisD

Answer 5

嗯，你所做的是正确的，选择元素的宽度由其内部选项的大小或CSS宽度控制。

以下是基于你的代码的示例（可正常工作）：

http://jsfiddle.net/7Wuq2/

- wiifm

---

这对我来说似乎非常奇怪，因为它在我的电脑上无法运行。 - S. N

我可以向您保证，在上面的示例中，选择框确实是250像素。如果您的问题有所不同，请详细说明一下？ - wiifm

它没有起作用，我正在使用jQuery移动框架，问题是我曾经在文本字段上遇到过同样的问题，但是当我使用宽度时，不知怎么地就解决了那个问题。 - S. N