如何顯示下拉菜單自動展開，以便它在頁面加載時顯示所有選項

我需要顯示DropDown（HTML選擇元素），當它被加載時展開，以便顯示DropDown中的所有選項。我搜索了很多，但令人驚訝的是，我沒有找到這樣一個簡單問題的答案。我正在使用jQuery的ASP.NET MVC。如何顯示下拉菜單自動展開，以便它在頁面加載時顯示所有選項

來源

2010-02-18 mohang

非直接解決方案：1）使第一個選項尖叫「選擇你的國家..」或類似的; 2）使用單選按鈕。 – chelmertz 2010-02-18 10:23:56

你可以在你的HTML代碼編寫：

<select size="3" name="test" id="test"> 
     <option value="1">one</option> 
     <option value="2">two</option> 
     <option value="3">three</option> 
    </select>

，然後通過JavaScript設置一個計時器，在你的頁面的結束而改變選擇框的大小屬性來1 例如（在clsed標記之前）之後，將此代碼：

<script type="text/javascript"> 
    window.setTimeout(function() { document.getElementById('test').size = 1; }, 5000); //5000 = 5 seconds 
</script>

來源

2010-02-18 10:18:15

這足以讓用戶知道該列表已填充。不適合我。不過謝謝你的努力。 – mohang 2010-02-18 10:49:54

這裏有一個小混搭（需要調整和優化），但應該讓你開始：

<div style="position:relative"> 
    <select style="position: absolute"> 
     <option>option 1</option> 
     <option>option 2</option> 
     <option>option 3</option> 
     <option>option 4</option> 
     <option>option 5</option> 
    </select> 
</div> 

<script type="text/javascript"> 

$(document).ready(function() { 
    $("select").one("focus", function() { 
     this.size = this.options.length; 
    }).one("click", function() { 
     this.size = 1; 
    }).one("blur", function() { 
     this.size = this.options.length; 
    }).focus(); 
}); 

</script>

來源

2010-02-18 10:16:25 karim79

感謝您的解決方案。解決方案正在工作，但我必須在其他地方的鼠標點擊時重新設置大小。但我可以很容易地補充說。 – mohang 2010-02-18 10:37:44

@mohang - 啊，我剛剛添加了一個'blur'事件處理程序，它使用'one'來綁定一次（可能有點整潔）。 – karim79 2010-02-18 10:52:18

你可以寫你的HTML這樣

<html> 
<select id="abc"> 
    <option>option 1</option> 
    <option>option 2</option> 
    <option>option 3</option> 
    <option>option 4</option> 
    <option>option 5</option> 
</select> 

</html>

下面，是對JAVASCRIPT功能，可自動擴展。

<script type="text/javascript"> 
    $(document).ready(function() { 
     var dropdown = document.getElementById("abc"); 
     var event; 
     event = document.createEvent('MouseEvents'); 
     event.initMouseEvent('mousedown', true, true, window); 
     dropdown.dispatchEvent(event); 
    }); 
</script>

來源

2014-04-03 04:57:31

我希望人們會寫更通用的示例代碼，不是每個人都使用jQuery。 – 2015-01-31 17:59:08

這個問題說，「我使用jQuery的ASP.NET MVC」，它被標記爲「jquery」，而函數的主體是通用javascript。 – mhanney 2015-08-05 18:56:56

如何顯示下拉菜單自動展開，以便它在頁面加載時顯示所有選項

回答

相關問題