Как получить расчет на той же странице, когда я выбираю раскрывающееся значение?

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

Вы можете использовать следующий код

$("#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 2

Вы можете использовать vanilla 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 3

$("#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>

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

Просто используйте 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>