我需要顯示DropDown(HTML選擇元素),當它被加載時展開,以便顯示DropDown中的所有選項。我搜索了很多,但令人驚訝的是,我沒有找到這樣一個簡單問題的答案。我正在使用jQuery的ASP.NET MVC。如何顯示下拉菜單自動展開,以便它在頁面加載時顯示所有選項
回答
你可以在你的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>
這足以讓用戶知道該列表已填充。不適合我。不過謝謝你的努力。 – 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>
你可以寫你的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>
我希望人們會寫更通用的示例代碼,不是每個人都使用jQuery。 – 2015-01-31 17:59:08
這個問題說,「我使用jQuery的ASP.NET MVC」,它被標記爲「jquery」,而函數的主體是通用javascript。 – mhanney 2015-08-05 18:56:56
- 1. 顯示下拉菜單中的所有頁面
- 2. 如何顯示下拉菜單以顯示所選值的記錄?
- 3. 不想在所有頁面中顯示選項菜單
- 4. 如何根據下拉選項顯示隱藏下拉菜單
- 5. Asp.net菜單控制 - 動態菜單顯示在頁面加載
- 6. 如何解決下拉菜單?所有的選擇顯示「>」
- 7. 它僅在下拉顯示一個選項菜單
- 8. 如何在活動開始時顯示選項菜單
- 9. 下載菜單變量divs顯示在頁面加載
- 10. 如果當前頁面在該子菜單項中,多級擴展jquery菜單以展開/顯示子菜單?
- 11. 如何顯示在下拉正確的選項下拉菜單並保留選項顯示
- 12. 在選擇下拉菜單中的第一個選項時,它不應該在下拉菜單中顯示
- 13. 顯示下拉菜單選擇在IFRAME
- 14. 如何在下拉菜單中顯示不同的選項?
- 15. 如何顯示一個下拉列表選項/選擇菜單
- 16. 在Excel下拉菜單後自動顯示列表選擇
- 17. 根據所選下拉菜單顯示下拉列表
- 18. 顯示jsp頁面中下拉菜單的選定值
- 19. 如何在調整屏幕時顯示菜單下拉菜單
- 20. 下拉菜單不顯示?
- 21. 顯示下拉菜單
- 22. 下拉菜單不顯示
- 23. 下拉菜單不顯示
- 24. ToolStripSplitButton顯示下拉菜單
- 25. 下拉菜單不顯示
- 26. 單擊菜單項時顯示導航下拉菜單
- 27. 我使用引導來顯示多選下拉菜單,但它顯示簡單的下拉菜單
- 28. 蜂窩下拉選項菜單。如何顯示?
- 29. 如何突出顯示下拉菜單中的選項?
- 30. 選項顯示在菜單
非直接解決方案:1)使第一個選項尖叫「選擇你的國家..」或類似的; 2)使用單選按鈕。 – chelmertz 2010-02-18 10:23:56