查找空的选择框答案

【问题标题】：Find empty select boxes查找空的选择框
【发布时间】：2019-12-11 19:34:37
【问题描述】：

我正在尝试使用 jQuery 来定位页面上的空表单字段。

对于输入文本字段，我可以使用

input[value='']

对于 textarea 字段，我可以使用

textarea:empty

什么是选择器，用于查找其选定选项为空值的选择框？

即使 jQuery 允许使用 .val() 检索选定的选项值，以下内容也不能用作选择器。

select[value='']

【问题讨论】：

input[value=''] 不会找到加载后填充文本的元素，因为 value 属性没有更新。
@epasc。是的，您是对的，但我的目的是将重点放在页面加载上，因此无论哪种方式都可以。

标签： javascript jquery

【解决方案1】：

您可以选择所有选择的选项为空值的选择框：

$('select option:selected[value=""]')

您还可以检查所选选项是否为空值：

$('select option:selected').val() === ""

演示：

$(function() {
    console.log('The option with text "' + $('select option[value=""]').text() + '" has no value.');
    
    $('select').change(function() {
        if ($('select option:selected').val() === "") { // or $(this).val() === ""
            console.log('This option has no value.');
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select>
    <option value="value1">Option 1</option>
    <option value="value2">Option 2</option>
    <option value="value3">Option 3</option>
    <option value="">Option 4</option>
</select>

编辑：

重点示例：

$(function() {
    $('.check').each(function() {
        if (!$(this).val()) {
            $(this).focus();
            return false;
        }
    });
});

.check {
    display: block;
    margin-bottom: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
    <input type="text" class="check" value="John Doe">
    
    <select class="check">
        <option value="value1">Opiton 1</option>
        <option value="value2">Opiton 2</option>
        <option value="value3">Opiton 3</option>
        <option value="" selected>Opiton 4</option>
    </select>
    
    <textarea class="check" rows="4">The cat was playing in the garden</textarea>
</form>

【讨论】：

谢谢，这是我正在寻找的第一种方法。我想将焦点放在页面加载时表单中的第一个空输入、选择或文本区域。但是您的答案对我不起作用，我怀疑是因为它是从查询返回的选项，而不是父选择。如果它是单个对象，我可以使用 .parent() 但这是一个逗号分隔的多个选择器，以获取 DOM 顺序中的第一个空字段（例如 input[value='']、select option:selected[value= ''], textarea:empty)
虽然它看起来像一个单独的问题，但我编辑了答案。您可以为所有表单元素（输入、选择、文本区域等）指定一个类，并在页面加载时检查它们的值是否为空。关注第一个没有值的匹配元素，然后返回 false。

【解决方案2】：

通用选择器可能不是最好的选择。我会选择所有表单元素并遍历它们以寻找第一个没有值的元素

$(":input").each(function () {
  if (!this.value) {
    this.focus()
    return false
  }
})

如果您的表单中有复选框或单选按钮，您可能需要添加复选框。

【讨论】：