I want to hide only those select box which has a null value selected. I have following HTML and jQuery
You can use the atrribute selector to find elements that have a selected value :
$('.date-month option[selected="selected"]').parent().hide();
Show/hide selects :
$('.date-month').each(function() {
if ($(this).find('option[selected="selected"]').length>0) {
$(this).hide();
} else {
$(this).show();
}
});
$(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>
One line should be enough:
$('.date-month option[selected="selected"]').hide();
https://jsfiddle.net/wh27868m/1/