使用Tab键时，选择框的Onchange事件

Question

我有两个名为country和city的选择框。当我从国家/地区框中选择一个onchnage时，会触发事件并使用ajax请求加载城市。

但是当我使用标签进行导航时，会出现一些问题。

过程。

按Tab键进入国家/地区选择框 按“M”键来查找从“M”开始的值 然后再次单击标签

第二个标签点击应该关注城市框。但它不仅仅是第三个标签点击是关注城市选择框。

你有什么想法解决这个问题吗？

代码

<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解释了如何控制Tab键顺序。基本上，您可以使用tabindex来控制Tab键顺序。以下是他们的示例代码的相关部分，以及不幸的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>

类似的信息（没有HTML 4示例代码）位于the HTML5 draft。