我的菜單中有一個（隱藏的）html選擇對象，它連接到一個菜單按鈕鏈接，因此單擊該鏈接將顯示列表以便您可以從中選擇。如何在javascript中自動展開html選擇元素

當你點擊按鈕時，它會調用一些javascript來顯示<select>。點擊離開<select>隱藏列表。我真正想要的是讓<select>看起來完全展開，就好像你點擊了「向下」箭頭一樣，但我無法得到這個工作。我嘗試了很多不同的方法，但無法取得任何進展。我在做什麼目前是這樣的：

<li> 
    <a href="javascript:showlist();"><img src="/images/icons/add.png"/>Add favourite</a> 
    <select id="list" style="display:none; onblur="javascript:cancellist()"> 
    </select> 
</li> 

// in code 
function showlist() { 
    //using prototype not jQuery 
    $('list').show(); // shows the select list 
    $('list').focus(); // sets focus so that when you click away it calles onblur() 
}

我已經打過電話$('list').click()。
我試過設置onfocus="this.click()" 但在這兩種情況下，我得到

Uncaught TypeError: Object # has no method 'click'

其特有的link text說，它支持標準的功能。

我試過設置哪些工作，但不具有相同的外觀.size = .length（如當你點擊打開元素，它漂浮在頁面的其餘部分。）

沒有人有任何建議？

來源

2010-05-27 xan

[使用Javascript/jQuery的打開選擇？（http://stackoverflow.com/questions/2048213/open-select-using-javascript-jquery） – 2010-05-27 18:06:51

可能重複的可能重複[如何以編程方式告訴HTML SELECT下拉（例如，由於鼠標懸停）]（http://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select - 下拉爲例 - 由於t） – CMS 2010-05-27 18:32:02

類似的問題 - 感謝指出 - 他們似乎更多的是尋找選擇控制尺寸（寬度和高度），而我想要的做的是讓它看起來「打開」。 – xan 2010-05-28 08:09:40

-1

您有語法錯誤。它應該是：

$('#list').click();

你忘了#

來源

2010-05-27 18:07:37 Anthony

確實如此，但'click'不會展開'select'元素。 – CMS 2010-05-27 18:32:33

不在原型我相信... – xan 2010-05-28 08:07:09

我遇到了同樣的問題，要落實在我的應用程序的鍵盤導航，而是選擇元素並沒有擴大，因此在使用鍵盤的人是將失去功能。我創建了ExpandSelect（）函數，它模擬鼠標在選定元素上的點擊，它通過創建另一個<select>，通過設置size屬性同時顯示多個選項，代碼託管在Google Code網站上，ExpandSelect.js僅爲4 KB，見截圖，並在這裏下載：

http://code.google.com/p/expandselect/

截圖

有在GUI有點區別模擬時點擊，但它並沒有真正的問題，看到它自己：

當鼠標點擊：

MouseClicking http://expandselect.googlecode.com/hg/mouseclick_manyoptions.jpg

當模擬點擊：

EmulatingClicking http://expandselect.googlecode.com/hg/emulateclick_manyoptions.jpg

更多屏幕上項目的網站，上面的鏈接。

來源

2011-11-09 19:14:37

-1

請試試這個：

function showlist() { 
    //using prototype not jQuery 
    $('#list').show(); // shows the select list 
    $('#list').focus(); // sets focus so that when you click away it calles onblur() 
}

來源

2012-10-10 05:49:34

我堅持你的代碼在[JSFiddle]（http://jsfiddle.net/URXyQ/），它不起作用。選擇框會收到焦點，但不會展開。（Chrome在Win7上。） – 2012-10-10 05:57:21

@RoddyoftheFrozenPeas只是我看到了你的JSFiddle。請申請選擇框是顯示：無; CSS屬性。並在腳本中使用$（'＃list'）而不是$（'list'）並在JSFiddle左側選擇jquery 1.8.2 – 2012-10-10 06:04:59

你的代碼在你的答案中說「使用原型而不是jQuery」。而且它仍然不起作用。 [更新小提琴]（http://jsfiddle.net/URXyQ/3/）。雖然它顯示選擇，但不會擴展它。（Chrome，Win7）。 – 2012-10-10 13:56:05

這裏一個簡單的解決方案，自動展開的選擇菜單（所有可見的選項）

<select name="ddlTestSelect" id="ddlTestSelect" style="width:200px;position:absolute;"> 
    <option selected="selected" value="0">defaulttt</option> 
    <option>option 2</option> 
    <option>option 3</option> 
    <option>option 4</option> 
</select> 
<script type="text/javascript"> 
var slctt=document.getElementById("ddlTestSelect"); 
slctt.size=slctt.options.length;if(slctt.options.length>1)slctt.style.width='470px'; 
</script>

來源

2014-03-10 08:34:08

-2

最簡單的方法是使用HTML的「多」屬性

<select multiple></select>

，你也可以添加一個風格屬性，設置列表的高度

<select multiple style="height:150px;"></select>

來源

2015-03-20 16:10:40

如何在javascript中自動展開html選擇元素

回答

截圖

相關問題