是否可以通過單擊按鈕使選擇框下拉

Question

使用HTML選擇下拉列表，如下所示：

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

有沒有辦法我可以單擊頁面其他位置的按鈕，並讓選擇框下拉顯示選項？ 好像我在單擊選擇框本身一樣。

Answer 1

不，並非沒有使用自定義下拉選擇元素。

jQuery具有.click()但是它將僅執行綁定到select元素的任何onclick事件，而不執行GUI元素本身的本機“ click”事件。

Answer 2

Gareth的答案是正確的！

一種可能的選擇是更改選擇框的大小屬性，這不會使選擇顯示，但會將其顯示為列表框。 就像是：

function showSelect()
{
   var sel = document.getElementById('test');
   sel.size = 3;
   return false;   
}

<select id="test" size="1"> 
  <option>1</option> 
  <option>2</option> 
  <option>3</option> 
</select> 

<a href="#" onlclick="return showSelect();">show select list</a>

Answer 3

是的，但是解決方案比您想象的要簡單。 無需編寫Java腳本來引起焦點，只需創建按鈕，然后將select元素絕對定位在其頂部，其不透明度為0.001。 這將允許您以DOM預期的方式觸發選擇單擊。

例如， 在這里查看zappos的工作方式。

這可行！ 試試吧！

Answer 4

號（抱歉）

Answer 5

您可以通過執行以下操作來增加實際選擇區域的大小：

<select id="list1">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>
<button type="button" onclick="expand()">Click Me!</button>

<script type="text/javascript">
function expand()
{
   document.getElementById("list1").size=3;
}
</script>

這並沒有完全擴展下拉菜單，而是通過增加頁面的高度來顯示更多信息，但是它仍然可以完成您想要的操作。