Stop event propagation on focus JQuery

I'm testing keyboard navigation, but as I move on a dropdownlist it index change itself, I mean if it value is A as we focus on it through keyboard it value will become B.

I've used this to stop this but still no luck.

 e.preventDefault();
e.cancelBubble = true;
return false;

Here is the entire script of navigation.

<script type="text/javascript">
var _parent;
var _selectedIndex = 0;
$(document).ready(function() {

    $("input.flat,select.flat").click(function(){
    
        $("input.flat,select.flat").each(function(){
            $(this).removeClass('active_ele');
        });
        
        $(this).addClass('active_ele');
    
    });


    $("select.flat").bind('focus',function (e) {
        
        //e.preventDefault();
        //e.focus();
        //return false;
        //e.cancelBubble = true;
        //return false;
    });
    
    $("input.flat,select.flat").bind('keydown',function (e) {
            
        switch(e.keyCode)
        {
            case 37:
                /////Right
                _parent = $(this).parent().prev();
                
                if(_parent.hasClass('combo'))   ///this is select
                {
                    $(this).removeClass('active_ele');
                    nNode = _parent.children("select.flat");
                    nNode.addClass('act开发者_如何学Pythonive_ele');
                    _selectedIndex = nNode[0].selectedIndex;
                    nNode[0].focus();
                    nNode[0].selectedIndex = _selectedIndex;
                    
                }
                else if(_parent.hasClass('inputBox'))   ///this is select
                {
                    $(this).removeClass('active_ele');
                    nNode = _parent.children("input.flat");
                    nNode.addClass('active_ele');
                    nNode.focus();
                    
                }   
                
            
            break;
            
            case 39:
            //////////Left
            
                _parent = $(this).parent().next();
                
                if(_parent.hasClass('combo'))   ///this is select
                {
                    $(this).removeClass('active_ele');
                    nNode = _parent.children("select.flat");
                    nNode.addClass('active_ele');
                    _selectedIndex = nNode[0].selectedIndex;
                    nNode[0].focus();
                    nNode[0].selectedIndex = _selectedIndex;
                }
                else if(_parent.hasClass('inputBox'))   ///this is select
                {
                    $(this).removeClass('active_ele');
                    nNode = _parent.children("input.flat");
                    nNode.addClass('active_ele');
                    nNode.focus();
                }   
                
                
                break;

            case 40:
                /////Down
                _nNode = $(this).parent();
                _index = _nNode.attr('data');
                
                _index =  parseInt(_index) + 1
                ///td
                _nNode = _nNode.parent()
                    .next()
                    .children(0)[_index];
                
                _nNode = $(_nNode); 
                
                if(_nNode[0])
                {
                    if(_nNode.hasClass('combo'))
                    {   
                        
                        _nNode = _nNode.children("select.flat");
                        _nNode.addClass('active_ele');
                        $(this).removeClass('active_ele');
                        _selectedIndex = _nNode[0].selectedIndex;
                        _nNode[0].focus();
                        _nNode[0].selectedIndex = _selectedIndex;
                        
                    }
                    else if(_nNode.hasClass('inputBox'))
                    {
                        _nNode = _nNode.children("input.flat");
                        _nNode.addClass('active_ele');
                        $(this).removeClass('active_ele');
                        _nNode.focus();
                    }
                }
                
        
                break;

            case 38:
            /////Up
                    _nNode = $(this).parent();
                _index = _nNode.attr('data');
                    _index =  parseInt(_index) + 1
                ///td
                _nNode = _nNode.parent()
                    .prev()
                    .children(0)[_index];
                _nNode = $(_nNode); 
                if(_nNode[0])
                {
                    if(_nNode.hasClass('combo'))
                    {   
                        
                        _nNode = _nNode.children("select.flat");
                        _nNode.addClass('active_ele');
                        $(this).removeClass('active_ele');
                        _selectedIndex = _nNode[0].selectedIndex;
                        _nNode[0].focus();
                        _nNode[0].selectedIndex = _selectedIndex;
                    }
                    else if(_nNode.hasClass('inputBox'))
                    {
                        _nNode = _nNode.children("input.flat");
                        _nNode.addClass('active_ele');
                        $(this).removeClass('active_ele');
                        _nNode.focus();
                    }
                }
                break;

            case 46:
                $(this).val("");
        }
        
        e.preventDefault();
        e.cancelBubble = true;
        return false;

            
    });
});

</script>

Link to the file, please suggest a solution, how to stop this index changing. http://69.175.126.242/~develope/younussal/test/test.htm

Try e.stopPropagation();

It is in the JQuery documentation: http://api.jquery.com/event.stopPropagation/

I had encountered this same problem :

The hack I used was to blur it

node.addEventListener('focus',function(){this.blur();},false);

Use the 'TAB' key to move between controls instead of the arrows key (standard keyboard navigation).

Do not intercept arrow keys, you need them to change the values in the controls (selected items in the select boxes).

The browser and the OS should already do most of the work for you.