Setting focus on next dropdown instead of using blur() method?

Question

Problem:
I have many drop downs with dynamic changes going on at all times. The problem is I am having to use the blur() method to disable focus so that the class depending on the selected value can be applied.

Is there a way I can set the focus onto the next drop down element.

Tried:
Instead of blur(), I have tried this but it did not work.

this.next(".Element").focus();

Current code:

$('.Element').change(function () {
            var colour = $(this).find('option:selected').attr('class');
            $(this).removeClass().addClass(colour);
            this.blur();
        }).change

JS Fiddle:
jsfiddle of my code

Answer 1

try to make this a jQuery object to focus another element

$(this).next(".keyTechElement").focus();

EDIT 1: Seeing your DOM, changes is needed. The .next() function selects siblings in the DOM and inside <td> there is no .Element sibling.

$(this).blur();
$(this).closest('td').next("td").find(".Element").focus();

http://jsfiddle.net/UXJZ7/2/

Answer 2

I think manipulating focus with focus() or blur() is terrible for keyboard users.

Users also detest auto-tabbing on forms they rarely use.

Onchange doesn't mean a selection has been made, a user could be stepping through the options with the keyboard (or with assistive technology that simulates the keyboard like speech recognition software), you get an onchange event for every step in their selection.

You can get quite elaborate to work around this, but it's rarely worth the effort.

For your example, I'd just leave things like this: http://jsfiddle.net/KWvMZ/ It looks like the only reason you have a focus state in your style is to display the text with sufficient contrast, so I just set the yellow background to have black text when focussed and left it like that.

.