javascript - 使用 .each() jquery 进行多个选择框值测试

Question

从下面的代码可以清楚地看出，我正在尝试循环所有选择框，但排除一些 id。

问题是

如果不使用非选择器，它会循环遍历所有选择框并执行其应该执行的操作。但是当与 .not() 选择器一起使用时，它会跳过多个类型选择框。我是否使用了错误的语法或在这里遗漏了某些内容。

$('.selectpicker:not("#Fresher, #Simple, #Advanced") :selected').each(function(i, sel){
    if (!$(sel).val()){
        $(this).closest("div:has(label)").find(".bootstrap-select").removeClass('formvalid').addClass('formerror'); 
        $(this).closest("div:has(label)").find("span.validation").removeClass('valid').addClass('error');
    }else{
        $(this).closest("div:has(label)").find(".bootstrap-select").removeClass('formerror').addClass('formvalid');
        $(this).closest("div:has(label)").find("span.validation").removeClass('error').addClass('valid');           
    }
}); 

HTML

<select id="Fresher" name="Fresher" multiple class='selectpicker show-menu-arrow' data-width='100%' data-size='10' title='Select Saved Search'>
 <option class="bs-title-option" value="">Select Saved Search</option>
 <option value="61">QUALITY</option>
 <option value="62">TEST</option>
 <option value="64">NEW SEARCH</option>
 <option value="66">NEW SEARCH</option>
</select>

<select id="f_Min_salary" name='Min_salary' class="selectpicker show-menu-arrow" data-width="100%" data-size="10" title='Select Min Salary'>
 <option class="bs-title-option" value="">Select Min Salary</option>
 <option value="101"><1 lakh</option>
 <option value="102">1 lakh</option>
 <option value="103">1.5 lakh</option>
 <option value="104">2 lakh</option>
</select>

更新

抱歉:我忘记在第一个选择框中添加属性MULTIPLE。没有多个属性，它可以正常工作，正如我上面提到的。对于多个选择框，它会跳过验证。

更新2

或者是否有任何更简单的方法将当前选择框 ID 与 ID 数组相匹配，如果找到，则只需从任何规则中忽略该特定选择框即可。

Answer 1

删除选择器和 :selected 之间的空格伪选择器。空格在 jQuery 中非常重要。

<小时/>

编辑:

运行此JSFiddle ，看起来您的 jQuery 选择器工作得很好。可能是您的类切换代码未按您的预期工作。

<小时/>

编辑2:

您的选择器与 multiple 配合得很好选择器选项:JSFiddle

<小时/>

编辑3:

我想我终于明白问题是什么了 - 由于您的选择元素中有多个选择，因此您必须首先选择 <select>元素，然后然后检查是否至少做出了一项有效选择。

$('.selectpicker:not("#Fresher, #Simple, #Advanced")').each(function (idx, selectEl) {
    var $selectEl = $(this);

    var isValid = false;
    $selectEl.find(":selected").each(function (idx2, optionEl) {
        var $optionEl = $(this);

        if ($optionEl.val()) {
            isValid = true;

            // This will break the loop on first valid element
            return false;
        }
    });

    console.log("isValid: ", isValid);
    // rest of your code
});

当然，您的验证逻辑可能会有所不同(例如，您希望所有选择都有效)，但我认为您应该能够自行修改它。