我试图练习类似的东西,如here。 <option>
值表示房间数量,文本表示其价格。我想要做的是当我选择一个值,即使我之前选择了另一个值,代码应该更新值并计算价格。同样的事情也是为了消除。从多个下拉列表中添加,删除和计算价值和价格
如何添加,删除的价值和计算价格
https://jsfiddle.net/nsp0u703/
function update(_this) {
\t document.getElementById("booking_summary").style.display = "block";
\t
\t var textStr = _this.options[_this.selectedIndex].text;
\t var startPos = textStr.indexOf("(") + 1;
\t var endPos = textStr.indexOf(')',startPos);
\t var priceWCurrency = textStr.substring(startPos, endPos);
\t
\t var setShowQuantity = document.querySelector("#booking_summary .squantity");
\t setShowQuantity.innerHTML = _this.options[_this.selectedIndex].value;
\t
\t var roomSelectedText = document.querySelector("#booking_summary .rooms-count");
\t var totalPrice = document.getElementById("total_price");
\t
\t var checkQuantity = setShowQuantity.innerHTML;
\t if(checkQuantity == 0) {
\t \t checkQuantity.innerHTML = "";
\t \t roomSelectedText.innerHTML = "";
\t \t totalPrice.innerHTML = "";
\t \t return;
\t } else {
\t \t if(checkQuantity == 1 && checkQuantity != 0) {
\t \t \t roomSelectedText.innerHTML = "room for";
\t \t }
\t \t if(checkQuantity > 1) {
\t \t \t roomSelectedText.innerHTML = "rooms selected";
\t \t }
\t \t totalPrice.innerHTML = priceWCurrency;
\t }
}
<!-- first dropdown menu -->
<select onchange="update(this)">
<option value="0">0</option>
<option value="1">1 (BAM 99)</option>
<option value="2">2 (BAM 198)</option>
<option value="3">3 (BAM 297)</option>
<option value="4">4 (BAM 396)</option>
<option value="5">5 (BAM 495)</option>
</select>
<br />
<!-- second dropdown menu -->
<select onchange="update(this)">
<option value="0">0</option>
<option value="1">1 (BAM 99)</option>
<option value="2">2 (BAM 198)</option>
<option value="3">3 (BAM 297)</option>
<option value="4">4 (BAM 396)</option>
<option value="5">5 (BAM 495)</option>
</select>
<br />
<!-- third dropdown menu -->
<select onchange="update(this)">
<option value="0">0</option>
<option value="1">1 (BAM 99)</option>
<option value="2">2 (BAM 198)</option>
<option value="3">3 (BAM 297)</option>
<option value="4">4 (BAM 396)</option>
<option value="5">5 (BAM 495)</option>
</select>
<br />
<!-- fourth dropdown menu -->
<select onchange="update(this)">
<option value="0">0</option>
<option value="1">1 (BAM 99)</option>
<option value="2">2 (BAM 198)</option>
<option value="3">3 (BAM 297)</option>
<option value="4">4 (BAM 396)</option>
<option value="5">5 (BAM 495)</option>
</select>
<!-- display -->
<div id="booking_summary">
<strong class="squantity"></strong>
<span class="rooms-count"></span> <br />
<span id="total_price" class="total-price"></span>
</div>
太谢谢你了。你今天是我的英雄!似乎我有一些不必要的代码。 – Eniss