我爲預訂航班編寫了下面的代碼,效果很好。如何用jquery更改選項的值
我唯一的問題是,我無法更改每個select
的每個選項的值。
例如:我想要設置從0
到12
到各個option
的值。但它只是重複了內部選項標籤的值。
我該如何爲選項設置特殊值,而不僅僅是將它們中的文本重複爲值? 我該怎麼做? 這裏是我的代碼片段:
$(function() {
// Function to create child dropdown
var createChildDropdown = function(i) {
// Create a div in the following format:
// <div class="childs">
// <label for="...">Child (number)</label>
// <select id="..."></select>
// </div>
var $childDropdown = $('<div />', {
'class': 'childs'
});
$childDropdown.append($('<label />', {
'for': 'childDropdown-' + i
}).text('Child ' + i));
$childDropdown.append($('<select />', {
'id': 'childDropdown-' + i
}));
// Define options made available for each child
var options = ['a', 'b', 'c'];
options.forEach(function(option) {
// Create new option element and append to <select>
$childDropdown.find('select').append($('<option />').text(option).attr('value', option));
});
// Return documentFragment so that we can append it
return $childDropdown;
};
// Function to destroy child dropdown
var destroyChildDropdown = function($el, i) {
$el.find('div.childs').get(i).remove();
};
$(".button-click a").on("click", function() {
var button = $(this);
var oldVal = parseInt(button.closest("ul").prev().val());
var newVal = (button.text() == "+") ? oldVal + 1 : (oldVal > 0) ? oldVal - 1 : 0;
var total_value = "";
button.closest("ul").prev().val(newVal);
$(".travel").each(function() {
var cat = $(this).prev('span').text();
total_value += cat + ": " + $(this).val() + ", ";
});
if (oldVal < newVal) {
$('.childDropdowns').append(createChildDropdown(newVal));
} else if (oldVal > newVal) {
destroyChildDropdown($('.childDropdowns'), newVal);
}
total_value = total_value.substring(0, total_value.length - 2);
$(".main").val(total_value);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>
Count all1 Traveller(s)
<input type="text" name="no_travellers" class="main" value="Adults: 1" placeholder="" />
</label>
<br/>
<label>
<span>Children</span>
<input type="text" class="travel" id="CAT_Custom_410672" name="CAT_Custom_410672" value="0" />
<ul class="button-group button-click">
<li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
<li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
</ul>
</label>
<div class="childDropdowns"></div>
不清楚你在問什麼。什麼是if(oldVal
CBroe
此代碼爲我帶來選項的選擇框。我想改變每個選項的價值。例如:。在這段代碼中,每個選項的值都替換爲其中的文本 – inaz
_「這段代碼爲我提供了帶選項的選擇框」_ - 不,它沒有。它只會拋出一個錯誤,因爲在這一點上'oldVal'和'newVal'都不存在。 – CBroe