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

ProgramBox

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

Post author:admin
Запись опубликована:3 мая, 2023
Post category:Вопросы по программированию

#jquery #html #ajax

#jquery #HTML #ajax

Вопрос:

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

Я пробовал с 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>

1. ваш вопрос неясен

2. Вам не нужен ajax для выполнения вычислений. Вы можете использовать либо jQuery, либо ванильный javascript.

3. Зависит от того, где выполняется ваш расчет и что он делает. Вопрос подразумевает, что у вас уже есть вычисление на стороне сервера, которое может использовать данные, отличные от клиентских, для выполнения того вычисления, для которого вы в данный момент используете POST. Итак, в этом случае вам понадобится ajax. Однако, похоже, вам просто нужна «цена * 100», поэтому нет необходимости в ajax.

Ответ №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>

Ответ №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>

1. Добро пожаловать в Stack Overflow! Пожалуйста, найдите время, чтобы описать, в чем заключаются проблемы и почему это решение помогает. Помните, мы здесь для того, чтобы обучать людей, а не просто писать для них код.

Ответ №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>

Ответ №4:

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

1. Пожалуйста, найдите время, чтобы описать, в чем заключаются проблемы и почему это решение помогает. Помните, мы здесь для того, чтобы обучать людей, а не просто писать для них код.

Ответ №5:

Один из способов сделать это:

1) Предоставление id ( valueselection ) select опции для дифференцирования с другим select элементом.

2) Поместите базовую цену и общую цену внутри label с помощью unique 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>