Hiding entire select drop down menu on click without showing the menu

Question

I'm trying to hide the entire drop down menu on a click event but there is a bit of a delay and it shows the menu for a split second. I want it to hide without showing the menu at all.

Is it possible to either:

• Not display the menu at all on click

OR

• Hide the entire select box without it showing the menu on click

Happy to use JavaScript or 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();
    });
});

Current code is: https://jsfiddle.net/La9mnfhc/1/

Answer 1

If you want to hide the options or select itself, on mouseover you can do something like:

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

But if you want to use click event, 'click' event for select would be something like 'change' event.

Answer 2

you just have to do a simple trick, have that select to be hidden by default on the page load and you can make it visible after the selection as you want. just add style="display:none" as the attribute in the html of select element and make it show() after.