更改时显示/隐藏 div 并清除字段值

Question

我有一些 div 会根据选择值显示。假设有两个输入字段名称为“Apartment 和 Bechelor”，如果我选择“Apartment”，则某些 div 和选择字段将显示与公寓相关。我面临的问题是，选择另一个时我无法清除字段值。就像，选择“公寓”后，我会选择单身汉。现在应该清楚公寓下方字段的值，这样如果我再次选择“公寓”，我将获得默认值或清理字段。

<div id="residential" >
   <input type="radio" value="apartment" id="type_apartment" name="type"  >
   <label for="type_apartment" class="radio-inline"> Apartment/Flat </label>
   <input type="radio" value="bachelor" id="type_bachelor" name="type">
   <label for="type_bachelor" class="radio-inline"> Bechelor  </label>
</div>
<!-- show this when apartment select -->
<div class="form-group " id="tenant-flat">
   <select id="tenant-type" class="form-control" name="tenant">
      <option value="">Anyone</option>
      <option  value="family">Family</option>
      <option value="bechelor" >Bechelor</option>
   </select>
</div>
<div class="form-group " id="flat-type">
   <div class="col-sm-12">
      <select id="" class="form-control" name="flat-type">
         <option value="">Select Flat Type</option>
         <option value="sublet" >Sublet</option>
         <option value="full-flat" >Full Flat</option>
      </select>
   </div>
</div>
<!-- show this when bechelor select -->
<div class="form-group " id="r-type">
   <div class="col-sm-12">
      <select id="room" class="form-control" name="room_type">
         <option value="">Select Room Type</option>
         <option value="seat">Seat</option>
         <option value="room" >Room</option>
      </select>
   </div>
</div>
<div class="form-group " id="tenant">
   <div class="col-sm-12">
      <select id="" class="form-control" name="tenant">
         <option value="">Select Member</option>
         <option value="family" >Family</option>
         <option value="student" >Student</option>
         <option value="job-holder" >Job Holder</option>
      </select>
   </div>
</div>
<script>
   $(document).ready(function(){
      $('#r-type').hide();
      $('#tenant').hide();
      $('#tenant-flat').hide();
       $('#flat-type').hide();
    
      $('.pretty input[type="radio"]').click(function(){
         if($(this).attr('value') == 'apartment'){
            $('#tenant-flat').show();
         }
         else{
            $('#flat-type').hide();
         }
      });
      
      var showDiv = document.getElementById("tenant-type");
      showDiv.onchange = function(){
            var hiddenDiv = document.getElementById("flat-type");
            hiddenDiv.style.display = (this.value == "family") ? "block":"none";
            var genderDiv = document.getElementById("gender");
            genderDiv.style.display = (this.value == "bechelor") ? "block":"none";
      };
   
      
   
      $('.pretty input[type="radio"]').click(function(){
         if($(this).attr('value') == 'bachelor' || $(this).attr('value') == 'sublet' || $(this).attr('value') == 'hostel' ){
            $('#r-type').show();
            $('#tenant').show();
          
            $('#tenant-type').hide();
   
         }
         else{
            $('#r-type').hide();
            $('#tenant').hide();
            $('#tenant-type').show();
           
   
         }
      });
   
   });
</script>

Answer 1

要重置下拉选项，您可以使用以下行将选择元素 selectIndex 属性的值设置为 0： $('.form-control').prop('selectedIndex', 0); 并在您的代码中：

$(document).ready(function(){
    $('#r-type').hide();
    $('#tenant').hide();
    $('#tenant-flat').hide();
     $('#flat-type').hide();
     
     $('#residential input[type="radio"]').click(function(){
         if($(this).attr('value') == 'apartment'){
            $('#tenant-flat').show();
            $('#flat-type').show();
            $('#r-type').hide();
            $('#tenant').hide();
         }
         else{
            $('#r-type').show();
            $('#tenant').show();
            $('#flat-type').hide();
            $('#tenant-flat').hide();
         }

         $('.form-control').prop('selectedIndex', 0);
      });

    $('#tenent-type').on('change', function() {
      if($('#flat-type').val =='family') {
        $('#flat-type').show();
      } else {
        $('#flat-type').hide();
      }
      
      if($('#gender').val =='bechelor') {
        $('#gender').show();
      } else {
        $('#gender').hide();
      }
    });
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="residential" >
   <input type="radio" value="apartment" id="type_apartment" name="type"  >
   <label for="type_apartment" class="radio-inline"> Apartment/Flat </label>
   <input type="radio" value="bachelor" id="type_bachelor" name="type">
   <label for="type_bachelor" class="radio-inline"> Bechelor  </label>
</div>
<!-- show this when apartment select -->
<div class="form-group " id="tenant-flat">
   <select id="tenant-type" class="form-control" name="tenant">
      <option value="">Anyone</option>
      <option  value="family">Family</option>
      <option value="bechelor" >Bechelor</option>
   </select>
</div>
<div class="form-group " id="flat-type">
   <div class="col-sm-12">
      <select id="" class="form-control" name="flat-type">
         <option value="">Select Flat Type</option>
         <option value="sublet" >Sublet</option>
         <option value="full-flat" >Full Flat</option>
      </select>
   </div>
</div>
<!-- show this when bechelor select -->
<div class="form-group " id="r-type">
   <div class="col-sm-12">
      <select id="room" class="form-control" name="room_type">
         <option value="">Select Room Type</option>
         <option value="seat">Seat</option>
         <option value="room" >Room</option>
      </select>
   </div>
</div>
<div class="form-group " id="tenant">
   <div class="col-sm-12">
      <select id="" class="form-control" name="tenant">
         <option value="">Select Member</option>
         <option value="family" >Family</option>
         <option value="student" >Student</option>
         <option value="job-holder" >Job Holder</option>
      </select>
   </div>
</div>