Show/hide div and clear filed value when change

I have some div that will show depending on the select value. Suppose there are two input fields name 'Apartment and Bechelor' If I select 'Apartment' some div and select field will show related to the apartment. The problem I am facing is, I can't clear the field value when selecting another. Like, after selecting 'Apartment', I will select Bachelor. Now it should be clear the value of the field which was under the apartment so that If I again select 'Apartment', I will get default values or clean fields.

<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>