X Y Positioning after an Item Selected in Drop Down Menu

Question

I have a vertical "Refine Search" results bar on the left-hand side of a page. Because this menu can be long, I am wanting an "Update Results" button to appear to the left after a selection is made somewhere on that menu so that the user can quickly press the button after their changes have been refined. Everything works great except when you make a selection from a drop-down menu. For some reason, the button always goes back up to the top of the page after a selection has been made from the drop down menu. It only does this for drop down menus.

I am using the following jquery code:

$(".topLeftNavBarInner").click(function(e){
        var parentOffset = $(this).offset(); 
        var relX = parentOffset.left-140;
        var relY = e.pageY-15;
        $(".FloatingUpdateSearchResultsDiv").show();
        $(".FloatingUpdateSearchResultsDiv").css({position:"absolute",left:relX,top:relY});
}); 

You can see what I am talking about by testing it here. Click "Magnification Type" on the "Refine Search" menu on the left of the page: http://www.scopemonster.com/search777.php?Cat=91

Answer 1

The issue is likely due to the calculation of $(this).offset() is based on the position of the "option" element and not the parent "select" that I'm guessing you're wanting to target.

Consider this approach:

var parentOffset;
if($(this).is('option'))
    parentOffset = $(this).parent().offset();
else
    parentOffset = $(this).offset();

UPDATE:

$(".topLeftNavBarInner").click(function(e){
    var parentOffset = $(this).offset();
    var relX = parentOffset.left-140;
    var relY;
    if(e.target.nodeName=='OPTION') {
        var selectOffset = $(e.target).parent().offset();
        relY = selectOffset.top;
    }
    else
        relY = e.pageY-15;
    $(".FloatingUpdateSearchResultsDiv").show();
    $(".FloatingUpdateSearchResultsDiv").css({position:"absolute",left:relX,top:relY});
});

You may still choose to manipulate the "relY" value in the case of an OPTION being the source of the click but this should keep the floating DIV in the area you want.