Question

I have the following markup:

<select style="display:none">
    <option value='1'>1</option>
    <option vlaue='2'>2</option>
</select>
<input type="text" id="comboBox" />
<ul id="comboBoxData" style="display:none">
    <li id='1'>1</li>
    <li id='2'>2</li>
</ul>

and the following JQuery code:

$(document).ready(function() {
    $('select').each(function() {
        var parent = this;
        $('#comboBoxData').on('click', 'li', function() {
            var value = $(this).prop('id');
            $(parent).val(value);
            $('#comboBox').val(value);
        });
    });   
    $('#comboBox').bind('focusin', function () {
        $('#comboBoxData').show();
    });   
    $('#comboBox').bind('focusout', function () {
        $('#comboBoxData').hide();
    });
});

When I click on one of the LI’s the ‘comboBoxData’ element disappears before the click trigger happens. Is there a way around this or an alternate event that I can use instead to have the same effect as a focusout?

Answer 1

Put mouseenter and mouseleave events and change the value of a global variable say isOver.

$('select').each(function() {
    var parent = this;
    $('#comboBoxData').on('click', 'li', function() {
        var value = $(this).prop('id');
        $(parent).val(value);
        $('#comboBox').val(value);
        $('#comboBoxData').hide();
    });
}); 
$('#comboBoxData').mouseover(function(){
    isOver = true;
}).mouseleave(function(){
    isOver = false;
});
$('#comboBox').bind('focusin', function () {
    $('#comboBoxData').show();
});   
$('#comboBox').bind('focusout', function () {
    if(!isOver){
        $('#comboBoxData').hide();
    }
});