jQuery Hide Div(s) on focus of drop down menu or text (live search) input

Question

Can anyone help me? I'm trying to hide the #hideme div when the a user clicks the drop down menu (to select something) or puts the focus on the text field. Thanks!

   #hideme {
     background:#ccc;
    }

    <script>
    $(function(){
       $('#skill_select').click(function(){
            $('#hideme').hide();
        });
    }):
    </script>
    <select>
            <option selected="selected">Pick from the list</option>
            <option>Option One</option>
            <option>Option Two</option>
    </select>
    or <input type="text" value="type something">
    <br/><br/>
    <div id="hideme">Hide Me Please</div>

The Scrum Meister · Accepted Answer · 2011-03-06 01:17:44Z

2

Give the select and textbox ID's:

<select id="mySelect">
    <option selected="selected">Pick from the list</option>
    <option>Option One</option>
    <option>Option Two</option>
</select>
or <input type="text" value="type something" id="myText">
<script type="text/javascript">
    function hideMe() {
        $('#hideme').hide();
    }

    $('#mySelect').change(hideMe);
    $('#myText').focus(hideMe);
</script>

answered Mar 6, 2011 at 1:17

The Scrum Meister

30.2k8 gold badges69 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

The Scrum Meister Over a year ago

@webwrks Remove the "double colon" at the end of your code (posted before in the comments). see jsfiddle.net/Pc5Pz

Hussein · Accepted Answer · 2011-03-06 01:25:37Z

1

Assuming all you want to do is hide.

$('select, input').click(function() {
        $('#hideme').hide();
    });

If you want to show the div back again when user clicked outside select or input, then do this

$('select,input').click(function(e) {
    e.stopPropagation();
    $('#hideme').hide();
});
$(document).click(function() {
    $('#hideme').show();
})

Check working example at http://jsfiddle.net/2p6Y7/2/

Don't use select, input. Create id's for each of them and select them by there id.

edited Mar 6, 2011 at 1:25

answered Mar 6, 2011 at 1:20

Hussein

42.9k25 gold badges115 silver badges143 bronze badges

1 Comment

webwrks Over a year ago

This works Hussein, but I was trying to do it on focus and change like the Scrum Meister did it...why is The Scrum's not working?

Collectives™ on Stack Overflow

jQuery Hide Div(s) on focus of drop down menu or text (live search) input

2 Answers 2

1 Comment

Check working example at http://jsfiddle.net/2p6Y7/2/

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Check working example at http://jsfiddle.net/2p6Y7/2/

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related