仅隐藏那些选择了空值的选择框 [英] Hide only those Select Box which has null value selected

问题描述

我只想隐藏那些选择了空值的选择框.我有以下HTML和jQuery

I want to hide only those select box which has a null value selected. I have following HTML and 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>

为此，我正在使用以下代码

For that I am using following code

$('.date-month option').each(function() {
    if (this.selected)
      $(this).parent().hide();
     else
       $(this).parent().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>

这篇关于仅隐藏那些选择了空值的选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！