找到第一个可见的必需下拉列表，这在jQuery中是空的

Question

我已经尝试了下面的代码，但它不适用于下拉菜单，即使以下两种下拉列表都在索引0，TIA。

设计： -

<select required="required" id="Countries"> 
    <option selected="selected" value="0">--Select--</option> 
    <option value="27">UK</option> 
    <option value="1">United States</option> 
</select> 

<select required="required" id="States"> 
    <option value>--Select--</option> 
    <option value="1">Abc</option> 
    <option value="2">Xyz</option> 
</select> 

的jQuery： -

var totalRequired_Empty = $('input:blank:not(:checkbox,:button,:radio),select option[value="0"],textarea:blank').filter('[required]:visible').length; 
if (totalRequired_Empty > 0) { 
var firstRequired = $('input:blank:not(:checkbox,:button,:radio),select option[value="0"],textarea:blank').filter('[required]:visible:first'); 

Answer 1

也许它是一个古老的方式，但你可以申请$.each： -

$(document).ready(function(){ 
 
    $('select[required]').each(function(){ 
 
    if($(this).val() ==0 && $(this).val()!=='' && $(this).val()!=='undefined'){ 
 
     $(this).css({'background-color':'red'}); 
 
    } 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select required="required" id="Countries"> 
 
    <option selected="selected" value="0">--Select--</option> 
 
    <option value="27">UK</option> 
 
    <option value="1">United States</option> 
 
</select> 
 

 
<select required="required" id="States"> 
 
    <option value>--Select--</option> 
 
    <option value="1">Abc</option> 
 
    <option value="2">Xyz</option> 
 
</select>

注意： - 您可以根据您的要求更改条件。

Answer 2

请试试这个

$('select[required]').each(function() { 
      if ($(this).val() == 0 || $(this).val() == '') { 
       $(this).css({ 'background-color': 'red' }); 
      } 
    });