Onchange event of select box when using tab key - tabs

Question

I have 2 select boxes called country and city. When i select a value from country box onchnage event is fired and cities will be loaded using an ajax request.
But when i use the tabs to navigate there are some issues.
Process.
Press tab key and get to country select box
press a key like 'M' to find values starting from 'M'
Then click tab again
The second tab click should focus the city box. But its not working only the 3rd tab click is focusing the city select box.
Do you have any idea of solving this??
Code
<label>Country * : </label>
<select tabindex="1" onchange="loadCities(this.options[this.selectedIndex].value,'url')" id="cmbDistric" name="cmbDistric">
<option value="0">Select</option>
<option value="1">Colombotest</option>
<option value="2">Colombotest</option>
<option value="3">Colombotest</option>
</select>
<label>City * : </label>
<select tabindex="6" >
<option value="0">Select</option>
</select>

Answer 1

This W3C document explains how to control the tabbing order. Basically, you can use tabindex to control the tabbing order. Here's the relevant part of their sample code, complete with unfortunate HTML 4-isms:
<FORM action="..." method="post">
<P>
<INPUT tabindex="1" type="text" name="field1">
<INPUT tabindex="2" type="text" name="field2">
<INPUT tabindex="3" type="submit" name="submit">
</P>
</FORM>
Similar information (without the HTML 4 sample code) is in the HTML5 draft.