單擊時隱藏整個選擇下拉菜單而不顯示菜單

Question

我試圖將整個下拉菜單隱藏在click事件中，但是會有一點延遲，並且顯示菜單的時間是一秒鍾。 我希望它隱藏而不顯示任何菜單。

是否可以：

• 單擊時根本不顯示菜單

要么

• 隱藏整個選擇框，不顯示單擊菜單

很高興使用JavaScript或jQuery 。

HTML

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

jQuery的

$(document).ready(function(){
    $(document).on("click","select",function(){
        $(this).hide();
    });
});

當前代碼是： https : //jsfiddle.net/La9mnfhc/1/

Answer 1

如果要隱藏選項或自行選擇，則在鼠標懸停時可以執行以下操作：

$(document).ready(function(){
    $(document).on("mouseover","select",function(){
    $(this).find('option').hide();//hide options
    $(this).hide();//hide select itself
  });
});

但是，如果要使用click事件，則select的“ click”事件將類似於“ change”事件。

Answer 2

您只需要做一個簡單的技巧，就可以在頁面加載時默認情況下隱藏該選擇，並且您可以根據需要在選擇后使其可見。 只需在select元素的html中添加style="display:none"作為屬性，然后使其show() 。