Click here to Skip to main content
11,798,546 members (47,926 online)
Click here to Skip to main content

ASP.NET Select Dropdownlist item using Tab key

, 30 Jun 2012 CPOL 19.6K 6
Rate this:
Please Sign up or sign in to vote.
Select drop-down list item with jQuery plug-in

select item in drop-down list using tab key

Table of Contents


A couple days ago I saw a post from one of the 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 item in the drop-down list. In general, we can use the up and down arrow key 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 are attached, everyone are welcome to download it.


Show in listing 1-3 is the brief summary of the plug-in and 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 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) {
    //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 1

drop-down list first item blank

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) {
    // remove the focus from the selected dropdownlist and
    // move the focus on selected control to the next control
    jQuery(":input:eq(" + (jQuery(":input").index($this) + 1) + ")").focus();

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) {
    // remove the focus from the selected dropdownlist and
    // move the focus on selected control to the previous control
    jQuery(":input:eq(" + (jQuery(":input").index($this) - 1) + ")").focus();

Using the code

Include the jQuery library and the plug-in and as many drop-down list control/element as you want into the web page. Please refer to listing 4 on how to call the plug-in.

Listing 4

<script type="text/javascript">
        $(document).ready(function () {

Point of Interest

At one point I was stuck trying to figure out the solution to move the focus to previous and next control with cross browser compatibility support. Later I found the workaround on For some reason the following code works fine without any input tag on the page. The code clearly indicated that it should look for the next input element. Anyway, I have tested it on both the HTML and ASP.NET page and it work fine.

Listing 5 

jQuery(":input:eq(" + (jQuery(":input").index($this) + 1) + ")").focus(); //next
jQuery(":input:eq(" + (jQuery(":input").index($this) - 1) + ")").focus(); //previous

I think this plug-in might be handy for in-house data entry web application.


I hope someone will find this information useful and make your programming job easier. If you find any bugs or disagree with the contents or want to help improve this article, please drop me a line and I'll work with you to correct it. I would suggest downloading the demo and explore it in order to grasp the full concept of it because I might miss some important information in this article. Please send me an email if you want to help improve this article.

Tested on: Internet Explorer 9.0, Firefox 12.0, Google Chrome 19.0, Apple Safari 4.0.4



06/30/2012: Initial version.


Watch this script in action





This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Bryian Tan
Software Developer
United States United States
I have over three years of experience working with Microsoft technologies. I have earned my Microsoft Certified Technology Specialist (MCTS) certification. I'm a highly motivated self-starter with an aptitude for learning new skills quickly.

You may also be interested in...

Comments and Discussions

QuestionI guess it works.. Pin
HaBiX1-Jul-12 21:01
memberHaBiX1-Jul-12 21:01 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.151002.1 | Last Updated 1 Jul 2012
Article Copyright 2012 by Bryian Tan
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid