Jquery技术问题：切换下拉框后恢复默认文本及数值异常

Hey there! Let's fix those two frustrating issues you're having with your booking form. I'll break down each problem and show you exactly how to adjust your code to make it work as expected.

Problem 1: Can't restore dropdown text when switching back to default person count #

The issue here is that you're overwriting the option text directly when selecting 4 persons, but you never saved the original text to revert back to. We'll solve this by storing the original text in a data attribute when the page loads, then using that to reset the text when we switch away from the 4-person option.

Problem 2: Dinner/breakfast costs show 0 when selecting 4 persons initially #

This happens because when you select 4 persons, the dinner/breakfast dropdowns are still on their default 0 value. We'll fix this by automatically selecting a default option (and updating the value) when the 4-person option is chosen, so the calculations work immediately.

Here's the full modified code: #

HTML (no changes needed here, included for context)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<form class="booking-form needs-validation" name="book-room-form" action="" id="contactForm" method="post" novalidate> 
<h1>Star Wars Room</h1> 
<table class="table room-table" data-price-p-person="400" data-ss="200"> 
<thead class="thead-dark"> 
<tr> 
<th scope="col"> 
<label class="form-check-label selected-label" for="room-selected">Select</label> 
</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td class="persons"> 
<select class="browser-default custom-select num-person select-update" name="number-persons-selection" required> 
<option value="0" selected>Select Number of Persons</option> 
<option value="1">1 person R600</option> 
<option value="2">2 persons R800</option> 
<option value="3">3 persons R1200</option> 
<option value="4">2 adults and one child under 5 years</option> 
</select> 
</td> 
</tr> 
<tr> 
<td class="dinner"> 
<select class="browser-default custom-select num-dinner select-update" name="dinner-selection"> 
<option value="0" selected>Select Dinner Course</option> 
<option class="option-two-course-dinn" value="120">Two Course Dinner R120</option> 
<option class="option-three-course-dinn" value="200">Three Course Dinner R200</option> 
</select> 
</td> 
</tr> 
<tr class="view-total"> 
<td><label for="room-total" class="tot">Total: R <input type="text" name="room-total" class="total" size="6" value="0" readonly="readonly" /></label></td> 
</tr> 
</tbody> 
</table> 
<h1>Game of Thrones Room</h1> 
<table class="table room-table" data-price-p-person="400" data-ss="200"> 
<thead class="thead-dark"> 
<tr> 
<th scope="col"> 
<label class="form-check-label selected-label" for="room-selected">Select</label> 
</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td class="persons"> 
<select class="browser-default custom-select num-person select-update" name="number-persons-selection" required> 
<option value="0" selected>Select Number of Persons</option> 
<option value="1">1 person R600</option> 
<option value="2">2 persons R800</option> 
<option value="3">3 persons R1200</option> 
<option value="4">2 adults and one child under 5 years R800</option> 
</select> 
</td> 
</tr> 
<tr> 
<td class="dinner"> 
<select class="browser-default custom-select num-dinner select-update" name="dinner-selection"> 
<option value="0" selected>Select Dinner Course</option> 
<option class="option-two-course-dinn" value="120">Two Course Dinner R120</option> 
<option class="option-three-course-dinn" value="200">Three Course Dinner R200</option> 
</select> 
</td> 
</tr> 
<tr> 
<td class="breakfast"> 
<select class="browser-default custom-select num-bf select-update" name="bf-selection"> 
<option value="0" selected>Select Breakfast</option> 
<option class="option-basic-bf" value="70">Basic R70</option> 
<option class="option-full-bf" value="120">Full R120</option> 
</select> 
</td> 
</tr> 
<tr class="view-total"> 
<td><label for="room-total" class="tot">Total: R <input type="text" name="room-total" class="total" size="6" value="0" readonly="readonly" /></label></td> 
</tr> 
</tbody> 
</table> 
<div class="grand-total-cont"><label for="grand-total" class="tot">Grand Total (inclusive with number of days): R <input type="text" class="grandtotal" size="6" value="0" readonly="readonly" name="grand-total" /></label></div> 
<button name="submit-request" type="submit" class="btn btn-primary">Submit</button> 
<input type="hidden" name="submitted" id="submitted" value="true" /> 
</form>

Modified JavaScript

$(document).ready(function() {
  // Save original option text to data attributes on page load
  $('.room-table').each(function() {
    const $table = $(this);
    $table.find('.option-two-course-dinn').data('original-text', $table.find('.option-two-course-dinn').text());
    $table.find('.option-three-course-dinn').data('original-text', $table.find('.option-three-course-dinn').text());
    
    // Only save breakfast text if the table has a breakfast dropdown
    if ($table.find('.num-bf').length) {
      $table.find('.option-basic-bf').data('original-text', $table.find('.option-basic-bf').text());
      $table.find('.option-full-bf').data('original-text', $table.find('.option-full-bf').text());
    }
  });
});

$('body').on('change', '.select-update', function(e){ 
  $('.room-table').each(function(){ 
    const $table = $(this);
    const persons_price = $table.data('price-p-person'); 
    const ss = $table.data('ss'); 
    const num_persons = Number($table.find('.num-person').val()); 
    let room_cost = 0;
    let dinner_costs = 0;
    let breakfast_costs = 0;
    let total = 0;

    if(num_persons >= 1) { 
      let dinner = Number($table.find('.num-dinner').val()); 
      let breakfast = $table.find('.num-bf').length ? Number($table.find('.num-bf').val()) : 0;

      room_cost = persons_price * num_persons; 
      
      // Handle 4-person case (2 adults + 1 child)
      if(num_persons === 4){ 
        room_cost = persons_price * 2; 
        
        // If dinner is not selected, default to first option and update value
        if(dinner === 0) {
          $table.find('.num-dinner').val(120).trigger('change');
          dinner = 120;
        }
        dinner_costs = dinner * 2; 
        
        // Update dinner option text
        $table.find(".option-two-course-dinn").text(`Adult 2 course dinner ${dinner_costs} pp Child under 5 Free`); 
        $table.find('.option-three-course-dinn').text(`Adult 3 course dinner ${dinner_costs} pp Child under 5 Free`); 

        // Handle breakfast if the table has it
        if($table.find('.num-bf').length) {
          // If breakfast is not selected, default to first option and update value
          if(breakfast === 0) {
            $table.find('.num-bf').val(70).trigger('change');
            breakfast = 70;
          }
          breakfast_costs = breakfast * 2; 
          $table.find(".option-basic-bf").text(`Adult basic breakfast ${breakfast_costs} pp Child under 5 Free`); 
          $table.find('.option-full-bf').text(`Adult full breakfast ${breakfast_costs} pp Child under 5 Free`); 
        }
      } else {
        // Calculate normal costs for non-4-person cases
        dinner_costs = num_persons * dinner; 
        breakfast_costs = num_persons * breakfast; 

        // Add single supplement for 1 person
        if(num_persons === 1){ 
          room_cost += ss; 
        }

        // Restore original option text
        $table.find('.option-two-course-dinn').text($table.find('.option-two-course-dinn').data('original-text'));
        $table.find('.option-three-course-dinn').text($table.find('.option-three-course-dinn').data('original-text'));
        
        if($table.find('.num-bf').length) {
          $table.find('.option-basic-bf').text($table.find('.option-basic-bf').data('original-text'));
          $table.find('.option-full-bf').text($table.find('.option-full-bf').data('original-text'));
        }
      }

      total = room_cost + dinner_costs + breakfast_costs; 
    } 

    // Update room total
    $table.find('.total').val(total); 

    // Calculate grand total
    let grand_total = 0;
    $('.total').each(function(){ 
      const val = Number($(this).val()) || 0; 
      grand_total += val; 
    }); 
    const num_days = $('.date-picks').find("#days").val() || 1; 
    $('.grandtotal').val(grand_total * num_days); 
  }); 
}); 

Key Changes Explained: #

1. Saved Original Text: We use $(document).ready() to store the original option text in data-original-text attributes. This lets us easily revert back when switching away from the 4-person option.
2. Default Selection for 4 Persons: When selecting 4 persons, if dinner/breakfast are still on the default 0 value, we automatically select the first valid option and update the value. This ensures the cost calculations work immediately without manual selection.
3. Restored Text on Non-4 Cases: In the else block (for all person counts except 4), we reset the option text back to the original stored value.
4. Cleaned Up Calculations: We restructured the variable declarations to avoid confusion and ensured all costs are properly included in the total (including breakfast for rooms that have it).

This should fix both of your issues—give it a test!

内容的提问来源于stack exchange，提问作者I Love Code