How to trigger click on select box on hover using jQuery ?

01 Dec, 2021
In this article, we are going to learn, how we can trigger a click event on the select box or drop-down menu while hovering the mouse using jQuery.
For creating such behavior for a select box, we will use the jQuery attr() method. This method is used to set or return the attributes and values of the selected elements on the webpage. Note that we will not be able to directly trigger the click event on hover, so we are using the attr() method to get the work done.
Approach: We will call the hover() method on the following id or class of the select box. We will use the attr() method to get the size of the select box and in the same method we will change its size to 1, so when we move the cursor out from the select box it gets back to the default size. By using this approach, we will be able to show the whole list on mouse hover and when the user selects any value from the list it goes back to the default view.
Example: 
HTML
<!DOCTYPE html><head>    <script src=     "https://code.jquery.com/jquery-3.6.0.min.js"           integrity=     "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="            crossorigin=      "anonymous">     </script>    <title>Trigger click on hover on the select box</title>    <style>        body {            margin: 0px;            padding: 0px;            box-sizing: border-box;        }        .main{            display: flex;            align-items: center;            align-items: center;            justify-content: center;            margin: 50px;        }        .main div{            width: 100px;            height: 100px;            background-color: red;            margin: 10px;            border-radius: 50%;            cursor: pointer;        }        #select_value{            outline: none;            width: 120px;        }    </style></head><body><div class="main">    <select id="select_value">        <!--  There are five items on the list  -->        <option value="">Select</option>        <option value="Actor">Actor</option>        <option value="Dancer">Dancer</option>        <option value="Singer">Singer</option>        <option value="Musician">Musician</option>        <option value="Fighter">Fighter</option>    </select></div></body><script>    $(function(){        // When the user hovers over the select box,        // it gets the value of the whole list.        $('#select_value').hover(function() {            $(this).attr('size', $('option').length);        },          // When the user stops hovering over the select box,         // it gets back to the normal or default value.        function() {            $(this).attr('size', 1);        });          // When the user clicks on the select box,         // it gets the value of the selected item.          $('#select_value').click(function() {            $(this).attr('size', 1);        });    });    </script></html>
Output:
HTML-Questions
jQuery-Methods
jQuery-Questions
Picked
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
Design a Tribute Page using HTML & CSS
Build a Survey Form using HTML and CSS
Angular File Upload
Form validation using jQuery
JQuery | Set the value of an input text field
How to change selected value of a drop-down list using jQuery?
Form validation using jQuery
How to add options to a select element using jQuery?
jQuery | children() with Examples