javascript - Jquery如何在另一个选择上更改选项后将选择选项文本设置回默认值

Question

我有 3 个选择下拉列表，当我在第一个选择下拉列表中选择选项 4 时，它会更改其他选择下拉列表的文本。但是，如果我决定我真的想要第一个选项，然后我回到选择它我希望在第一个选择下拉列表中选择选项 4 之前将其他选项更改回默认文本，我无法让它工作 - 我尝试过change()，，clone()将其设置回val(0)等。

我遇到的另一个问题是，当我选择选项 4 时，下拉文本会发生应有的变化，但值（dinner_costs 和早餐成本）显示为 0，直到我选择该选项，然后显示该值。

$('body').on('change', '.select-update', function(e){

$('.room-table').each(function(){
	var persons_price = $(this).data('price-p-person');
	var ss = $(this).data('ss');

	var num_persons = Number($(this).find('.num-person').val());

	if(num_persons >= 1) {
		var dinner = Number($(this).find('.num-dinner').val());
		var breakfast = Number($(this).find('.num-bf').val());
		var room_cost = persons_price * num_persons;

		var dinner_costs = num_persons * dinner;
		var breakfast_costs = num_persons * breakfast;


		if(num_persons == 1){
			room_cost = room_cost + ss;

		}
		else if(num_persons == 4){
			room_cost = persons_price * 2;
			room_cost = persons_price * 2;

			dinner_costs = dinner * 2;

			$(this).find(".num-dinner .option-two-course-dinn").text('Adult 2 course dinner ' + dinner_costs + ' pp Child under 5 Free');
			$(this).find('.num-dinner .option-three-course-dinn').text('Adult 3 course dinner ' + dinner_costs + ' pp Child under 5 Free');

			breakfast_costs = breakfast * 2;

			$(this).find(".num-bf .option-basic-bf").text('Adult basic breakfast ' + breakfast_costs + ' pp Child under 5 Free');
			$(this).find('.num-dinner .option-full-bf').text('Adult full breakfast ' + breakfast_costs + ' pp Child under 5 Free');
		}

		var total = room_cost + dinner_costs;

	}
	else total = 0;
	$(this).find('.total').val(total);
	total = 0;
	$('.total').each(function(){
		val = $(this).val() | 0;
		total = val ? (parseFloat(total + val)) : total;
	});
	var num_days = $('.date-picks').find("#days").val();
	$('.grandtotal').val(total * num_days);
});
});

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

标签： javascriptjqueryhtml