從多個下拉列表中添加，刪除和計算價值和價格

Question

我試圖練習類似的東西，如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>

Answer 1

在變化，你應該重新計算所有選擇。我已經添加了一些類和屬性數據提取減少：

function update() { 
 
    var selects = document.querySelectorAll(".rooms"); 
 
    var roomsCount = 0; 
 
    var priceTotal = 0; 
 
    selects.forEach(function(select) { 
 
    var roomsOfType = select.options[select.selectedIndex].value; 
 
    if(roomsOfType != 0) { 
 
     roomsCount += parseInt(roomsOfType); 
 
     priceTotal += parseFloat(select.options[select.selectedIndex].getAttribute("data-price")); 
 
    } 
 
    }); 
 
    var setShowQuantity = document.querySelector("#booking_summary .squantity"); 
 
    var roomSelectedText = document.querySelector("#booking_summary .rooms-count"); 
 
    var totalPrice = document.getElementById("total_price"); 
 
    
 
    if(roomsCount > 0) { 
 
    document.getElementById("booking_summary").style.display = "block"; 
 
    totalPrice.innerText = priceTotal; 
 
    setShowQuantity.innerText = roomsCount; 
 
    roomSelectedText.innerText = roomsCount == 1 ? "room for" : "rooms selected"; 
 
    } else { 
 
    totalPrice.innerText = ""; 
 
    setShowQuantity.innerText = ""; 
 
    roomSelectedText.innerText = ""; 
 
    } 
 
}

<!-- first dropdown menu --> 
 
Room type A:<select class="rooms" onchange="update()"> 
 
    <option value="0">0</option> 
 
    <option value="1" data-price="99">1 (BAM 99)</option> 
 
    <option value="2" data-price="198">2 (BAM 198)</option> 
 
    <option value="3" data-price="297">3 (BAM 297)</option> 
 
    <option value="4" data-price="396">4 (BAM 396)</option> 
 
    <option value="5" data-price="495">5 (BAM 495)</option> 
 
</select> 
 
<br /> 
 
<!-- second dropdown menu --> 
 
Room type B:<select class="rooms" onchange="update()"> 
 
    <option value="0">0</option> 
 
    <option value="1" data-price="10">1 (BAM 10)</option> 
 
    <option value="2" data-price="19">2 (BAM 19)</option> 
 
    <option value="3" data-price="28">3 (BAM 28)</option> 
 
    <option value="4" data-price="37">4 (BAM 37)</option> 
 
    <option value="5" data-price="46">5 (BAM 46)</option> 
 
</select> 
 
<br /> 
 
<!-- third dropdown menu --> 
 
Room type C:<select class="rooms" onchange="update()"> 
 
    <option value="0">0</option> 
 
    <option value="1" data-price="12">1 (BAM 12)</option> 
 
    <option value="2" data-price="23">2 (BAM 23)</option> 
 
    <option value="3" data-price="34">3 (BAM 34)</option> 
 
    <option value="4" data-price="45">4 (BAM 45)</option> 
 
    <option value="5" data-price="56">5 (BAM 56)</option> 
 
</select> 
 
<br /> 
 
<!-- fourth dropdown menu --> 
 
Room type D:<select class="rooms" onchange="update()"> 
 
    <option value="0">0</option> 
 
    <option value="1" data-price="99">1 (BAM 99)</option> 
 
    <option value="2" data-price="198">2 (BAM 198)</option> 
 
    <option value="3" data-price="297">3 (BAM 297)</option> 
 
    <option value="4" data-price="396">4 (BAM 396)</option> 
 
    <option value="5" data-price="495">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>

Answer 2

包裹一切在<form>然後在其上註冊的更改事件。可輕鬆訪問<form>中具有[name]屬性的任何表單節點。使用<output>上的for屬性使它們與指定的<select>相關聯。

代碼片段

select, 
 
option { 
 
    font: inherit; 
 
}

<form id='booking' name='booking' onchange='qty.value = Number(s1.value) + Number(s2.value) + Number(s3.value) + Number(s4.value); total.value=(qty.value * 99)'> 
 

 
    <!-- first dropdown menu --> 
 
    <label for='s1'>Lot 1</label> 
 
    <select id='s1' name='s1'> 
 
    <option value="0">0</option> 
 
    <option value="1">1 - $99</option> 
 
    <option value="2">2 - $198</option> 
 
    <option value="3">3 - $297</option> 
 
    <option value="4">4 - $396</option> 
 
    <option value="5">5 - $495</option> 
 
    </select> 
 
    <br/> 
 
    <!-- second dropdown menu --> 
 
    <label for='s2'>Lot 2</label> 
 
    <select id='s2' name='s2'> 
 
    <option value="0">0</option> 
 
    <option value="1">1 - $99</option> 
 
    <option value="2">2 - $198</option> 
 
    <option value="3">3 - $297</option> 
 
    <option value="4">4 - $396</option> 
 
    <option value="5">5 - $495</option> 
 
    </select> 
 
    <br/> 
 
    <!-- third dropdown menu --> 
 
    <label for='s3'>Lot 3</label> 
 
    <select id='s3' name='s3'> 
 
    <option value="0">0</option> 
 
    <option value="1">1 - $99</option> 
 
    <option value="2">2 - $198</option> 
 
    <option value="3">3 - $297</option> 
 
    <option value="4">4 - $396</option> 
 
    <option value="5">5 - $495</option> 
 
    </select> 
 
    <br/> 
 
    <!-- fourth dropdown menu --> 
 
    <label for='s4'>Lot 4</label> 
 
    <select id='s4' name='s4'> 
 
    <option value="0">0</option> 
 
    <option value="1">1 - $99</option> 
 
    <option value="2">2 - $198</option> 
 
    <option value="3">3 - $297</option> 
 
    <option value="4">4 - $396</option> 
 
    <option value="5">5 - $495</option> 
 
    </select> 
 
    <br/><br/> 
 
    <!-- display --> 
 
    <fieldset id="summary"> 
 
    <legend>Summary</legend> 
 
    <label for='qty'>Rooms:</label> 
 
    <output for='s1 s2 s3 s4' id='qty' name='qty'></output> 
 
    <label for='total'>Total: $</label> 
 
    <output for='qty' id="total" name='total'></output> 
 
    </fieldset> 
 

 
</form>