嗨，我有几个房间，每个房间都包含相同的2个select下拉菜单。当我在“人数”下拉列表中选择值为4的选项时，我希望更改下一个选项（选择的晚餐）的文本，但仅更改我所选房间下的选项的文本。当前，它会更改两个Dinner选项下拉菜单的选项值。我知道是由于.each()函数的缘故，我也尝试了.change和.on('change')，但无济于事。
HTML：
<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 disabled>
<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" disabled>
<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 disabled>
<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" disabled>
<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>
<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>
jQuery：
$('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 room_cost = persons_price * num_persons;
var dinner_costs = num_persons * dinner;
if(num_persons == 1){
room_cost = room_cost + ss;
}
else if(num_persons == 4){
room_cost = persons_price * 2;
dinner_costs = dinner * 2;
//here is the issue
$('.num-person option:selected').each(function(){
$(".num-dinner").find(".option-two-course-dinn").text('Adult 2 course dinner ' + dinner + ' pp Child under 5 Free');
$(".num-dinner").find('.option-three-course-dinn').text('Adult 3 course dinner ' + dinner + ' 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);
});
});
答案 0 :(得分：0)
您可以尝试代码：
if(num_persons == 1){
room_cost = room_cost + ss;
$(this).find(".num-dinner .option-two-course-dinn").text('Two Course Dinner R120');
$(this).find('.num-dinner .option-three-course-dinn').text('Three Course Dinner R200');
} else if(num_persons == 4){
room_cost = persons_price * 2;
dinner_costs = dinner * 2;
$(this).find(".num-dinner .option-two-course-dinn").text('Adult 2 course dinner ' + dinner + ' pp Child under 5 Free');
$(this).find('.num-dinner .option-three-course-dinn').text('Adult 3 course dinner ' + dinner + ' pp Child under 5 Free');
}