Last Updated on November 29, 2020 by Roshan Parihar
Learn how to create a select box to open dropdown on hover using jQuery. The short answer is: use the hover event with the jQuery attr() function to show select dropdown.
If you are using the select box on your form, you may see its dropdown will open only on click. However, in some places of form, you may like to show the dropdown on mouse hover. This makes it easy for users to save more clicks on the dropdown to select options.
Default Behaviour of Dropdown Select Box on Click Displays Options
A simple select box option is showing in the example below. It contains options that you can open on dropdown click and select the options. Here, the users have to first click the select dropdown and after that, they will be able to select the required option.
|
1 2 3 4 5 6 7 8 |
<strong>Select Your Country Below</strong> <select> <option>Select Your Option</option> <option>India</option> <option>United States</option> <option>Canada</option> <option>Badminton</option> </select> |
Output
To get faster user input data, you may have to create a select box that allows users to select options on hover.
But, what is the method to show select options on hover rather than click? Well! you have to read the below methods to create your own select options open on hover. So, let’s start the method with a live example and download given below for a quick start.
How to Open Dropdown on Hover Using jQuery attr()
The jQuery hover() works when the users hover over the HTML elements. You have to perform displaying the select options when a hover event happens or trigger. Also, use the jQuery attr() to get the size of select and increase it on hover.
By doing this, it displays all the options together on hover. The user now requires only to click the select option for a single time to select their choice.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> $(function(){ $('#dropdown').hover(function() { $(this).attr('size', $('option').length); }, function() { $(this).attr('size', 1); }); }); </script> <strong>Select Your Favorite Game Below</strong> <select id="dropdown"> <option>Select Your Option</option> <option>Cricket</option> <option>Footbal</option> <option>Hockey</option> <option>Badminton</option> </select> |
Output
Select Your Favorite Game Below
Now, you just have to hover over the above select box to open every option. Click any option of your choice to select.
Display Select Box Dropdown on Hover Using javascript
In addition to the above method, you can also create a select box dropdown options to display on hover using javascript. You have to use the below-given example as per your requirement.
It also doing the same thing as the above jQuery example does. However, it uses onmouseover and onmouseout event to make the below example working.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> function JSDropDown() { var x = document.getElementById("mydropdown").options.length; document.getElementById("mydropdown").size = x; } </script> <select id="mydropdown" onmouseover="JSDropDown()" onmouseout="this.size=1;"> <option>Select Your Option</option> <option>Single</option> <option>Married</option> </select> |
Output
Mouse hover over the above select box to get each option to select. You can change the options as per your use on the project.
You May Also Like to Read