事件发生后关注元素

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>

如果我选择了两种语言和性别的某些项目，但从usertype中选择了任何内容（“Select one”的值为“”），则会显示警告消息，但重点是语言，而不是usertype。

我应该怎样做才能专注于取消选择下拉列表（如果用户没有从多个下拉列表中选择项目，那么第一个未选中）？

Answer 1

这个怎么样：

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

Answer 2

您可以使用$.each，

执行此操作

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

Answer 3

鉴于更新的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();
    }
});

$("#submit").click(function(event) {
  var selects = $('.select'),
    hasNoValue = selects.filter(function() {
      return this.value === '' && this.options[this.selectedIndex].text.trim() === 'Select one'
    });
  if (hasNoValue.length) {
    hasNoValue.eq(0).focus();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<button id="submit">submit button</button>

外部JS Fiddle demo，用于实验和开发。

参考文献：

• JavaScript的：
  • HTMLOptionElement。
  • HTMLSelectElement。
  • String.prototype.trim()。
• jQuery的：
  • click()。
  • eq()。
  • filter()。
  • focus()。