I want blur select menu when it is open. I have made a small function when you hover the mouse on a tag then blur function will call. It is working fine in other browser but not working in Chrome. fiddle
Reproduce bug : click and open select menu and hover anchor tag, open select menu should be closed
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$('a').hover(function(){
$('select').blur();
})
})
</script>
</head>
<body>
<select>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
</select>
<a href="#">hover me</a>
</body>
</html>
I want blur select menu when it is open. I have made a small function when you hover the mouse on a tag then blur function will call. It is working fine in other browser but not working in Chrome. fiddle
Reproduce bug : click and open select menu and hover anchor tag, open select menu should be closed
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$('a').hover(function(){
$('select').blur();
})
})
</script>
</head>
<body>
<select>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
</select>
<a href="#">hover me</a>
</body>
</html>
- stackoverflow./questions/10851882/… - the second answer here seems to deal with the chrome issue – Smern Commented May 22, 2013 at 11:37
-
@amit .. Can you explain what you are trying to achieve with
.blur()? – Adil Shaikh Commented May 22, 2013 at 11:45 - put focus on it first – Pinch Commented May 24, 2013 at 15:09
- its a behaviour of chrome – Rohit Agrawal Commented May 24, 2013 at 15:17
2 Answers
Reset to default 3I had the same problem, and the idea was clear: you cannot blur an opened select element, because Chrome and Safari waits for the answer. BUT there is a workaround that you may find acceptable.
First, you cannot set focus to another element while the "select" is still active, so I have removed it by applying a "display:none". After that I trigger a click event on another harmless element. And then I re-add the select back, by setting a display:block. In this case, the code would look like(i will add a span to click on):
.......
<select>
<option>Test</option>
......
</select>
<a href="#">hover me</a>
<span class="clickable">element clicked</span>
.......
<script type="text/javascript">
$(document).ready(function (){
jQuery("a").mouseenter(function (){
$("select").css({'display':'none'});
$("span.clickable").focus().click();
$("select").css({'display':'block'});
});
});
</script>
You need to use .trigger() for that
<select id="selectboxId">
.......
</select>
$ ('#selectboxId').trigger('blur');