只隱藏那些選擇了空值的選擇框

Question

我只想隱藏那些選擇了空值的選擇框。我有以下HTML和jQuery

<div class="form-item"> 
<select name="select" class="date-month"> 
<option value="1">Jan</option> 
<option value="2">Feb</option> 
<option value="3">Mar</option> 
<option value="4">Apr</option> 
<option value="5" selected="selected">May</option> 
<option value="6">Jun</option> 
<option value="7">Jul</option> 
<option value="8">Aug</option> 
</select> 
</div> 
<div class="form-item"> 
<select name="select" class="date-month"> 
<option value="" selected="selected"></option> 
<option value="1">Jan</option> 
<option value="2">Feb</option> 
<option value="3">Mar</option> 
<option value="4">Apr</option> 
<option value="5">May</option> 
<option value="6">Jun</option> 
<option value="7">Jul</option> 
<option value="8">Aug</option> 
</select> 
</div> 

對於我使用下面的代碼

$('.date-month option').each(function() { 
    if (this.selected) 
     $(this).parent().hide(); 
    else 
     $(this).parent().show(); 
}); 

，但它不工作。

Answer 1

$(document).ready(function() { 
 
      $('.date-month').each(function() { 
 
       if ($(this).val()=='') 
 
        $(this).hide(); 
 
        
 
      }); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-item"> 
 
<select name="select1" class="date-month"> 
 
<option value="">select</option> 
 
<option value="1">Jan</option> 
 
<option value="2">Feb</option> 
 
<option value="3">Mar</option> 
 
<option value="4">Apr</option> 
 
<option value="5" selected="selected">May</option> 
 
<option value="6">Jun</option> 
 
<option value="7">Jul</option> 
 
<option value="8">Aug</option> 
 
</select> 
 
</div> 
 
<div class="form-item"> 
 
<select name="select2" class="date-month"> 
 
<option value="">select</option> 
 
<option value="1">Jan</option> 
 
<option value="2">Feb</option> 
 
<option value="3">Mar</option> 
 
<option value="4">Apr</option> 
 
<option value="5">May</option> 
 
<option value="6">Jun</option> 
 
<option value="7">Jul</option> 
 
<option value="8">Aug</option> 
 
</select> 
 
</div>

Answer 2

可以使用atrribute selector發現有一個選擇的價值元素：

$('.date-month option[selected="selected"]').parent().hide(); 

顯示/隱藏選擇：

$('.date-month').each(function() { 
    if ($(this).find('option[selected="selected"]').length>0) { 
     $(this).hide(); 
    } else { 
     $(this).show(); 
    } 
    }); 

Answer 3

一號線應該是足夠：

$('.date-month option[selected="selected"]').hide(); 

https://jsfiddle.net/wh27868m/1/