Javascript 在触发事件后关注元素

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

现在，对于一个下拉，这很好，但是当有多个DROPUDE时，它关注的是最后一个，而不是特定的下拉。例如，考虑一个带有三个DoPrdScript的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>

选择一个
客人
管理
选择一个
男性
女性
选择一个
C++
C

如果我选择了一些语言和性别的项目，但没有从usertype中选择任何内容（“select one”的值为“”），则会显示警报消息，但焦点会转到语言，而不是usertype

---

我应该怎么做才能专注于“未选择”下拉列表（或者如果用户没有从多个下拉列表中选择项目，则为第一个未选择的下拉列表）？

您可以使用

$进行操作。每个

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

您可以使用
$执行此操作。每个

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

这个怎么样：

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

这个怎么样：

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

考虑到更新后的HTML，面对一些猖獗的无法解释的否决投票，我建议如下：

// binding the anonymous function of the 'click'
// method as the event-handler for clicks on the
// element with the id of 'submit':
$("#submit").click(function (event) {

    // caching all the elements with the class of
    // 'select':
    var selects = $('.select'),

    // filtering those cached elements elements,
    // retaining only those for whom the assessment
    // provided to filter()'s anonymous function
    // returns a value of true, or is 'truthy':
        hasNoValue = selects.filter(function () {

            // here we're checking that the current
            // select has a value of '' (empty string):
            return this.value === '' && 

            // and that its currently selected <option>
            // (this.options is a collection of the
            // <option> elements within the current
            // <select> element, and this.selectedIndex
            // is the index of the selected <option>
            // in the options collection) has the
            // text of 'Select one'
            // (String.prototype.trim() removes leading
            // and trailing white-space from a supplied
            // string):
            this.options[this.selectedIndex].text.trim() === 'Select one'
        });

    // if the hasNoValue collection of <select> elements has a length
    // other than (the 'falsey') 0, then we enter the 'if':
    if (hasNoValue.length) {

        // preventing the default action of the click event:
        event.preventDefault();

        // selecting the first element from the collection
        // held within hasNoValue, and focusing that one:
        hasNoValue.eq(0).focus();
    }
});


选择一个
客人
管理
选择一个
男性
女性
选择一个
C++
C
提交按钮
考虑到更新的HTML，面对一些无法解释的投票，我建议如下：

// binding the anonymous function of the 'click'
// method as the event-handler for clicks on the
// element with the id of 'submit':
$("#submit").click(function (event) {

    // caching all the elements with the class of
    // 'select':
    var selects = $('.select'),

    // filtering those cached elements elements,
    // retaining only those for whom the assessment
    // provided to filter()'s anonymous function
    // returns a value of true, or is 'truthy':
        hasNoValue = selects.filter(function () {

            // here we're checking that the current
            // select has a value of '' (empty string):
            return this.value === '' && 

            // and that its currently selected <option>
            // (this.options is a collection of the
            // <option> elements within the current
            // <select> element, and this.selectedIndex
            // is the index of the selected <option>
            // in the options collection) has the
            // text of 'Select one'
            // (String.prototype.trim() removes leading
            // and trailing white-space from a supplied
            // string):
            this.options[this.selectedIndex].text.trim() === 'Select one'
        });

    // if the hasNoValue collection of <select> elements has a length
    // other than (the 'falsey') 0, then we enter the 'if':
    if (hasNoValue.length) {

        // preventing the default action of the click event:
        event.preventDefault();

        // selecting the first element from the collection
        // held within hasNoValue, and focusing that one:
        hasNoValue.eq(0).focus();
    }
});


选择一个
客人
管理
选择一个
男性
女性
选择一个
C++
C
“提交”按钮
您可能希望将焦点放在第一个
上。是否选择没有输入值的
元素？你能分享你的HTML的一个有代表性的（）示例吗？你能发布你的HTML吗？谢谢。我不知道为什么我们的答案会被否决，而上述毫无价值的评论会被否决。我很感兴趣的是，被否决的人能否提供一些见解，说明提议的答案是如何“没有用处的”通过这种方式，作者——以及我们这些阅读答案的人——可能会学到一些有用的东西。您可能想专注于第一个
。选择没有输入值的
元素？你能分享你的HTML的一个有代表性的（）示例吗？你能发布你的HTML吗？谢谢。我不知道为什么我们的答案会被否决，而上述毫无价值的评论会被否决。我很感兴趣的是，被否决的人能否提供一些见解，说明提议的答案是如何“没有用处的”这样，作者——以及我们阅读答案的人——可能会学到一些有用的东西。如果投票否决我的答案的人能够解释原因，我将不胜感激，我相信它能以尽可能简单的方式完美地回答这个问题。@morbidCode感谢HTML，我的答案应该有用。@Zak给你一个建议。如果您希望downvoter删除downvote，我想您需要编辑您的答案。同样的事情也发生在我的身上。看一看@普拉文：虽然你完全正确，但我认为扎克还不能看（除非他获得10公里的声誉）。@DavidThomas说得对！同意。如果否决我答案的人能解释原因，我将不胜感激。我相信它能以尽可能简单的方式完美地回答问题。@morbidCode感谢HTML，我的答案应该有用。@Zak给你一个建议。如果您希望downvoter删除downvote，我想您需要编辑您的答案。同样的事情也发生在我的身上。看一看@普拉文：虽然你完全正确，但我认为扎克还不能看（除非他获得10公里的声誉）。@DavidThomas说得对！同意。我猜——这不是我的反对票——这与没有解释这个答案中的代码如何解决问题有关，但我真的不确定。啊，我以前没有看过这个答案。事实上，我发现我的jquery代码并没有真正检查所有下拉列表，因为我没有使用.each。但这正是我编辑问题之前想做的！我猜——这不是我的反对票——这与没有解释这个答案中的代码如何解决问题有关，但我真的不确定。啊，我以前没有看过这个答案。事实上，我发现我的jquery代码并没有真正检查所有下拉列表，因为我没有使用.each。但这正是我编辑问题之前想做的！