Introduction
A couple days ago I saw a post from a CodeProject member asking something like "how to select data from the drop-down list using tab selection". I'm assuming he was referring to how to use the keyboard Tab key to select an item in the drop-down list. In general, we can use the up and down arrow keys to select the item from the highlighted drop-down list. I did a Google search and didn't find much information about it and I find this problem somewhat interesting. So I decided to use jQuery to implement the workaround. Sample code is attached; everyone is welcome to download it.
Implementation
Shown in listing 1-3 is the brief summary of the plug-in; comments are included on each line. The key code for the Tab key is 9. By default, pressing the Tab key will cause the cursor to advance to the next control. We can use the event.preventDefault() method to prevent the default action of an element from happening. Now, when the user presses on the Tab key, the item in the drop-down list will switch focus on the next item in the list. Basically the next selected index is equal to the current selected index plus one. In order to get rid of the blank drop-down list (Figure 1), when the selection reaches the last item, set the selected index to 0.
Listing 1
//Tab key pressed
if (keyCode == 9)
{
e.preventDefault();
//increase the selected index by 1 and set selected to the new index
$this.prop('selectedIndex', parseInt(curSelItemIndex) + 1);
//if selected index == number of items
// set the selected index=0
if (curSelItemIndex == items - 1)
{
$this.prop('selectedIndex', 0);
}
}
Figure 
The next task is to remove the focus from the selected drop-down list and set the focus to the next control when the escape key is pressed. We can use the jQuery blur() function to remove the focus from the highlighted drop-down list. After that search for the next first element within the selected drop-down list object and set the focus to that element.
Listing 2
//Escape key pressed
if (keyCode == 27)
{
e.preventDefault();
// remove the focus from the selected dropdownlist and
$this.blur();
// move the focus on selected control to the next control
jQuery(":input:eq(" + (jQuery(":input").index($this) + 1) + ")").focus();
return;
}
The final task is to ensure that pressing the Shift + Tab key will bring the focus back to the previous control. Please refer to listing 3.
Listing 3
//Shift + Tab Key
if (keyCode == 9 && e.shiftKey)
{
e.preventDefault();
Join the conversation! Your thoughts help the community grow.