时间戳

首页 > 解决方案 > 客户端单击表单选项后计算的javascript计算

javascript - 客户端单击表单选项后计算的javascript计算

问题描述

我正在做一个关于创建订单的小项目。一旦客户选择时间，我试图显示每页的价格。

例如，如果选择的时间是 4 小时，它应该返回 12 美元。如果它是 6 小时，它应该返回 10 美元......

<div class="col-md-6">
  <div class=" custom-select" style="width:200px;">
    <select class="form-control" id="time">
      <option value="0">Time...</option>
      <option value="1">4hrs</option>
      <option value="2">6hrs</option>
      <option value="3">1day</option>
      <option value="4">2days</option>
      <option value="5">3days</option>
      <option value="6">4days</option>
      <option value="7">5days</option>
      <option value="8">6days</option>
      <option value="9">7days</option>
      <option value="10">After 7 days</option>
    </select>
  </div>
</div>

<div class="col-md-6">
  <div class="form-group">
    <label class="bmd-label-floating">cpp</label>
    <input type="text" class="form-control" id="cpp">
  </div>
</div>

标签： javascripthtmlforms

解决方案

你可以做这样的事情。

const selectElement = document.querySelector('.ice-cream');

selectElement.addEventListener('change', (event) => {
  const result = document.querySelector('.result');
  result.textContent = `You like ${event.target.value}`;
});
<label>Choose an ice cream flavor:
  <select class="ice-cream" name="ice-cream">
    <option value="">Select One …&lt;/option>
    <option value="chocolate">Chocolate</option>
    <option value="sardine">Sardine</option>
    <option value="vanilla">Vanilla</option>
  </select>
</label>

<div class="result"></div>

推荐阅读