Question

我上周发布了关于能够根据选择切换隐藏字段的信息。我现在遇到一个问题，当我点击下拉选项中的一个选项时，它不会隐藏/显示我想要显示的其他下拉列表。

我感谢任何帮助：）

的jQuery

$(document).ready(function () {
    $('select[name="YourLocation"]').change(function () {
        if ($(this).val() == 'Customer Care Center') {
            $('.CCC').show();
        } else {
            $('.CCC').hide();
        }
    });
});

HTML

<div class="col-md-3">
   <div class="form-group">
      <label>Your Location</label>
      <select name="YourLocation" class="form-control select2" style="width: 100%;" required>
         <option value="" disabled selected>Select Your Location</option>
         <option value="Branch">Branch</option>
         <option value="Region">Region</option>
         <option value="Division">Division</option>
         <option value="Customer Care Center">Customer Care Center</option>
         <option value="Corporate">Corporate</option>
      </select>
   </div>
   <!-- /.form-group -->
</div>
<!-- /.col -->
<div class="col-md-3">
   <div class="form-group">
      <label></label>
      <select name="YourCenter" class="form-control select2 CCC" style="width: 100%;" required>
         <option value="" disabled selected>Select Your Center</option>
         <option value="Dallas">Dallas</option>
         <option value="Los Angeles">Los Angeles</option>
         <option value="Phoenix">Phoenix</option>
         <option value="Tampa">Tampa</option>
      </select>
   </div>
   <!-- /.form-group -->
</div>
<!-- /.col -->

Answer 1

这是一个很好的建议来改善您的代码。

当您隐藏第二个下拉列表时，您应首先unselect所选选项，然后使用

$('.CCC').val(null).hide();

否则即使它被隐藏，它仍然被选中，当你提交它时可能会造成麻烦，你会得到不好的数据。

  $('select[name="YourLocation"]').change(function() {
    if ($(this).val() == 'Customer Care Center') {
      $('.CCC').show();
    } else {
      $('.CCC').val(null).hide();
    }
  });

＆＃13;

$(document).ready(function() {
  $('select[name="YourLocation"]').change(function() {
    if ($(this).val() == 'Customer Care Center') {
      $('.CCC').show();
    } else {
      $('.CCC').val(null).hide();
    }
  });
});

＆＃13;

.CCC {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-md-3">
  <div class="form-group">
    <label>Your Location</label>
    <select name="YourLocation" class="form-control select2" style="width: 100%;" required>
      <option value="" disabled selected>Select Your Location</option>
      <option value="Branch">Branch</option>
      <option value="Region">Region</option>
      <option value="Division">Division</option>
      <option value="Customer Care Center">Customer Care Center</option>
      <option value="Corporate">Corporate</option>
    </select>
  </div>
  <!-- /.form-group -->
</div>
<!-- /.col -->

<div class="col-md-3">
  <div class="form-group">
    <label></label>
    <select name="YourCenter" class="form-control select2 CCC" style="width: 100%;" required>
      <option value="" disabled selected>Select Your Center</option>
      <option value="Dallas">Dallas</option>
      <option value="Los Angeles">Los Angeles</option>
      <option value="Phoenix">Phoenix</option>
      <option value="Tampa">Tampa</option>
    </select>
  </div>
  <!-- /.form-group -->
</div>
<!-- /.col -->

＆＃13;

Answer 2

试试这个......

 <select id="YourLocation" class="form-control select2" style="width: 100%;" required>
                                            <option value="" disabled selected>Select Your Location</option>
                                            <option value="Branch">Branch</option>
                                            <option value="Region">Region</option>
                                            <option value="Division">Division</option>
                                            <option value="Customer Care Center">Customer Care Center</option>
                                            <option value="Corporate">Corporate</option>
                                        </select>
    $(document).ready(function () {
                $('#YourLocation').change(function () 
                {
                    if ($(this).val() == 'Customer Care Center') {
                        $('.CCC').show();
                    } else {
                        $('.CCC').hide();
                    }
                });
            });

如何根据下拉选项显示隐藏的下拉菜单

2 个答案: