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

Last Updated : 31 May, 2023

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: In this example, we will use the above approach.

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>