Question

i have 3 drop down list on my page.2 have display set to none.When i click on drop down list(note just click, do not select) and mouse hover on the hello text the first drop down is reset but the drop down with display set to none are also displayed along side.I do not want that to happen.

Here is my html code

    <div id="mnc"> hello
</div>
<div id="slpt">
    <select id="slt">
        <option value="0">Option1</option>
        <option>Option2</option>
        <option>Option3</option>
        <option>Option4</option>
        <option>Option5</option>
</select>

    <select id="slt1" style="display:none;">
        <option value="0">Option1</option>
        <option>Option2</option>
        <option>Option3</option>
        <option>Option4</option>
        <option>Option5</option>
</select>

     <select id="slt2" style="display:none;">
        <option value="0">Option1</option>
        <option>Option2</option>
        <option>Option3</option>
        <option>Option4</option>
        <option>Option5</option>
</select>
</div>

Here is the jquery code

$(document).ready(function() {
    $('#mnc').mouseover(function() {
        $('select').hide().blur().show();
    });
});

and here is the jsfiddle
​

​

Answer 1

This would only affect the visible <select> element:

$('select:visible').hide().blur().show();

Reference: http://api.jquery.com/visible-selector/

However, I can’t see why you would hide it before the blur() call just to show it again immediately after it. You could easily reduce the code to call only .blur().