Question

选择下拉值时如何在同一页面上获得计算结果？

我尝试过使用ajax。但不是固定的。我是jquery和ajax的新手。

<!-- drop down selection -->
<select>                                                                 
<option value='1'>1 Pax</option>                                                                 
<option value='2'>2 Pax</option>
<option value='3'>3 Pax</option>
</select>

<p>Price per each: $100</p>

<!-- calculating here -->
<p>Total price: $100 x Value of pax)</p>

Answer 1

您可以使用普通JS addEventListener来更新计算，而不是AJAX。

// Store HTML elements in JS variables
const paxSelectEle = document.getElementById("pax-select");
const totalPriceEle = document.getElementById("total-price");

// Listen for a change in #pax-select 
paxSelectEle.addEventListener("change", () => {
  // Set the HTML of the total price to
  // 100 * #pax-select value
  totalPriceEle.innerHTML = 100 * paxSelectEle.value;
});

<!-- drop down selection -->
<select id="pax-select">
  <option value='1'>1 Pax</option>   
  <option value='2'>2 Pax</option>
  <option value='3'>3 Pax</option>
</select>

<p>Price per each: $100</p>

<!-- calculating here -->
<p>Total price: $<span id="total-price">100</span></p>

Answer 2

您可以使用以下代码

$("#ddldemo").change(function() {
  $("#ldldemo").text(100 * parseInt($("#ddldemo").val()));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <select id="ddldemo" name="ddldemo">
    <option value='1'>1 Pax</option>
    <option value='2'>2 Pax</option>
    <option value='3'>3 Pax</option>
  </select>
  <label id="ldldemo"></label>
  <p>Total price: $100 x Value of pax)</p>
</div>

Answer 3

只需使用jquery。您无需使用ajax进行计算。

您需要获取select标签的值并将其放在变量上那么您可以将其解析为整数，以便可以使用它来计算总价格。请查看以下示例：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="pax" onchange="calculate()">
  <option value='1' selected>1 Pax</option>
  <option value='2'>2 Pax</option>
  <option value='3'>3 Pax</option>
</select>
<p>Price per each: $100</p>
<p>Total: <span id="total"></span></p>
<script>
  function calculate() {
    var get_value = $("#pax option:selected").text();
    var no_pax = parseInt(get_value);
    var price = 100;
    var total_price = no_pax * price;

    $("#total").text(total_price);

  }
</script>

Answer 4

其中一种方法：

1）将id（valueselection）赋予select选项，以区别于另一个select元素。

2）将基价和总价放入label内，并具有唯一的id，类似于步骤1）

3）计算所选选项的初始价格和价格：

var i= 1;
var base=$('label#baseprice').text();
$('label#total').text(base);
$("select#valueselection").change(function(){
  i=$('select#valueselection').val();
  $('label#total').text(base*i);
});

请参见下面的代码段

var i= 1;
var base=$('label#baseprice').text();
$('label#total').text(base);
$("select#valueselection").change(function(){
  i=$('select#valueselection').val();
  $('label#total').text(base*i);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- drop down selection -->
<select id="valueselection">                                                                 
<option value='1'>1 Pax</option>                                                                 
<option value='2'>2 Pax</option>
<option value='3'>3 Pax</option>
</select>

<p>Price per each: $<label id="baseprice">100</label></p>

<!-- calculating here -->
<p>Total price: $<label id="total"></label></p>

Answer 5

$("#pax").change(function(e) {
  var price = 100;
  $("#total").html($(this).val() * price)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="pax">
  <option value='0'>Select Pax</option>
  <option value='1'>1 Pax</option>
  <option value='2'>2 Pax</option>
  <option value='3'>3 Pax</option>
</select>
<p>Price per each: $100</p>
<p>Total: <span id="total"></span></p>

选择下拉值时如何在同一页面中获取计算结果？

5 个答案: