更改HTML中選定項目的大小（寬度）

我是HTML新手，嘗試使用phoneGap和jQuery插件構建移動應用程序。我目前正在使用eclipse編程，在我的應用程序中，我有一個drop dwon菜單（選擇），其中包含一些項目。我試圖改變選擇項目的寬度，但它不起作用。在這裏你可以看到我做了什麼來解決這個問題：更改HTML中選定項目的大小（寬度）

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

來源

2011-07-27 S. N

你想讓它根據所選擇的選項來改變大小？ –

是的，這將是非常好的 –

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

從jQuery Mobile的文檔：

刷新選擇

如果您是通過JavaScript操作一個選擇，你必須調用刷新方法來更新視覺樣式。這裏有一個例子：

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

來源

2011-07-27 10:32:44 Semyazas

它沒有工作！ –

你是如何將這個函數加入你的代碼的？你是如何觸發它的？ – Semyazas

我用你的代碼是這樣的： –

嗯你做了什麼是正確的，選擇元素的寬度要麼通過裏面的選項或CSS寬度的大小來控制。基於

實例關閉你的代碼（即工作）：

http://jsfiddle.net/7Wuq2/

來源

2011-07-27 10:38:05 wiifm

它看起來真的很強烈，因爲它不適合我。 –

我可以向你保證，在上面的例子中確實選擇框是250px。如果你的問題有點不同，請注意詳細說明一下。 – wiifm

它沒有工作，我使用jQuery移動框架工作，事情是我曾經有與textfields相同的問題，但不知何故我能夠解決這個問題，當我用寬度， –

這裏是一個可行的樣本： http://jsfiddle.net/x472U/

來源

2011-07-27 10:41:53

它也沒有工作，你需要知道我正在使用jQuery移動框架！ –

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

從jqueryMobile文檔：

刷新選擇

如果您通過JavaScript操作選擇，您必須調用其刷新方法來更新視覺樣式。這裏有一個例子：

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

所以，如果你改變寬度，你仍然需要刷新

來源

2011-07-27 10:44:49 abhijit

這一個也沒有工作！ –

這樣做Semyazas建議寫document.ready或者函數並在其中包含js代碼 – abhijit

在OP最終明確使用jQuery Mobile之後，問題得到了可重現 – Semyazas

所有你需要做的是包裝你的選擇菜單：

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

然後你可以操縱你的選擇寬度尺寸JavaScript或CSS：

CSS：

#mySelect{ width: 150px; }

JAVASCRIPT：

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

來源

2012-08-20 11:13:39 BorisD

更改HTML中選定項目的大小（寬度）

回答

相關問題