javascript - 事件触发后聚焦于某个元素

Question

如果用户未选择下拉列表中的任何项目，然后聚焦该下拉列表，我想显示一条警报消息。我想在所有下拉菜单中使用“select”类来执行此操作。

$("#submit").click(function(event) {    
    if (!$(".select").val()) {
        alert("please select one");
        event.preventDefault();
    $(".select").focus();
    }
});

现在，这对于一个下拉菜单效果很好，但是当有多个下拉菜单时，它会关注最后一个下拉菜单，而不是特定的下拉菜单。例如，考虑一个包含三个下拉菜单的 html 页面。

<select class="select" id="usertype">
<option value="">Select one</option>
<option value="guest">Guest</option>
<option value="admin">Admin</option>
</select>

<select class="select" id="gender">
<option value="">Select one</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>

<select class="select" id="languages">
<option value="">Select one</option>
<option value="c++">c++</option>
<option value="c">c</option>
</select>

如果我选择了一些语言和性别的项目，但没有从用户类型中选择任何内容(“选择一个”的值为“”)，则会显示警报消息，但焦点会转到语言，而不是用户类型。

我应该怎么做才能关注未选择的下拉列表(或者如果用户没有从许多下拉列表中选择项目，则关注第一个未选择的下拉列表)？

Answer 1

这个怎么样:

$("#submit").click(function(event) {    
    if (!$(".select").val()) {
        alert("please select one");
        event.preventDefault();
        $(".select[selectedIndex=0]").focus();
    }
});