Question

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

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

＆＃13;

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;
	}
}

＆＃13;

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

＆＃13;

Answer 1

在更改时，您应该重新计算所有选择。我已经为数据提取减少添加了一些类和属性：

＆＃13;

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 = "";
  }
}

＆＃13;

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

＆＃13;

Answer 2

将所有内容包裹在<form>中，然后在其上注册更改事件。可以轻松访问<form>中具有[name]属性的任何表单节点。使用for上的<output>属性可将其与指定的<select>相关联。

<强>段

＆＃13;

select,
option {
  font: inherit;
}

＆＃13;

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

＆＃13;

添加，删除和计算多个下拉列表中的价值和价格

2 个答案: