[英]Jquery change text of an option in another selected option which is inside an .each() function
嗨,我有幾個房間,每個房間包含相同的2個選擇下拉菜單。 當我在人數下拉列表中選擇值為4的選項時,我想要更改下一個選項(晚餐選擇)的文本,但只有我選擇的房間下的選項文本。 目前,它會更改晚餐選項下拉列表的選項值。 我知道這是因為.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);
});
});
你可以嘗試代碼:
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');
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.