javascript - 从多个下拉列表中添加、删除和计算值(value)和价格

Question

我正在尝试练习类似的事情，例如 here 。 <option>值代表房间数量，文本代表价格。我想要做的是，当我选择一个值时，即使我之前选择了另一个值，代码也应该更新值并计算价格。同样的事情也适用于删除。

如何添加、删除值并计算价格

https://jsfiddle.net/nsp0u703/

function update(_this) {
	document.getElementById("booking_summary").style.display = "block";
	
	var textStr = _this.options[_this.selectedIndex].text;
	var startPos = textStr.indexOf("(") + 1;
	var endPos = textStr.indexOf(')',startPos);
	var priceWCurrency = textStr.substring(startPos, endPos);
	
	var setShowQuantity = document.querySelector("#booking_summary .squantity");
	setShowQuantity.innerHTML = _this.options[_this.selectedIndex].value;
	
	var roomSelectedText = document.querySelector("#booking_summary .rooms-count");
	var totalPrice = document.getElementById("total_price");
	
	var checkQuantity = setShowQuantity.innerHTML;
	if(checkQuantity == 0) {
		checkQuantity.innerHTML = "";
		roomSelectedText.innerHTML = "";
		totalPrice.innerHTML = "";
		return;
	} else {
		if(checkQuantity == 1 && checkQuantity != 0) {
			roomSelectedText.innerHTML = "room for";
		}
		if(checkQuantity > 1) {
			roomSelectedText.innerHTML = "rooms selected";
		}
		totalPrice.innerHTML = priceWCurrency;
	}
}

<!-- 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>