jQuery Hide Div(s) on focus of drop down menu or text (live search) input
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. Tha开发者_开发问答nks!
#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>
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>
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.
精彩评论