Question

我具有以下费用计算器设置，以便当用户从下拉菜单A和下拉菜单B中选择一项时，总费用会显示在页面上。

<form name="costcalculator">
  <div class="package-type">
    <select name="packageType" id="packageType" onchange="setMonths(this.value)">
      <option value="gold">Gold</option>
      <option value="silver">Silver</option>
      <option value="bronze">Bronze</option>
    </select>
  </div>

  <div class="months">
    <select name="months" id="months">
      <option value="1">1 month</option>
      <option value="2">2 months</option>
      <option value="3">3 months</option>
      <option value="4">4 months</option>
      <option value="5">5 months</option>
      <option value="6">6 months</option>
      <option value="7">7 months</option>
      <option value="8">8 months</option>
      <option value="9">9 months</option>
      <option value="10">10 months</option>
      <option value="11">11 months</option>
      <option value="12">12 months</option>
    </select>
  </div>

  <button type="button" onclick="calculatePrice()">Calculate</button>
  <div id="price"></div> 
</form>

<a href="javascript:goToSite();">Take me to a new page</a></p>

JavaScript：

var costs = {
    'gold': {'basePrice': 199.99, 'pricePerMonth' : 99.5, 'maxMonths': 12},
  'silver': {'basePrice': 150, 'pricePerMonth' : 75, 'maxMonths': 12},
  'bronze': {'basePrice': 75, 'pricePerMonth' : 37.5, 'maxMonths': 2}
};

function setMonths(package)
{
    var maxMonths = costs[package].maxMonths;
  document.getElementById("months").innerHTML = ''; // Clear all options
  for (var i = 1; i<=maxMonths; i++){
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = i +  (i > 1 ? ' months' : ' month');
    document.getElementById('months').appendChild(opt);
    }
}

function calculatePrice()
{
    var package = document.getElementById('packageType').value;
  var months = document.getElementById('months').value;
  var price = costs[package].basePrice + (costs[package].pricePerMonth * (months - 1));
  document.getElementById('price').innerHTML = price;
}

function goToSite()
{
    var package = document.getElementById('packageType').value;

    window.open('https://www.something.com/' + package, '_self');
}

也在JSFiddle上。

这对我和我所需要的都非常有用，但是我正在努力找出如何将这些数据保存到新页面或具有预先填充了文本字段的表单（如果更容易的话）的新页面上以及计算出的费用，并且该页面还显示了从两个下拉菜单中选择的选项。

因此，理想的情况是：用户从两个下拉菜单的每个菜单中选择一个选项。用户单击“计算”，将显示总成本（就像在JSFiddle中一样）。

然后，从JSFiddle开始，我添加了一些新代码（如上所示），一旦用户单击该按钮以显示总成本（显示在“ price” div所在的位置），就会有一个链接可以根据所选选项找到更多信息，以便将用户带到新页面。

但是我想稍微调整一下最后一部分，因此，与其让用户根据选择的选项（即www.something.com/gold或www.something.com/silver）进入页面，不管选择了什么选项，都转到一页，而该页显示了总费用和上一页中已选择的两个下拉选项。

我一直在阅读有关sessionStorage的信息，但不确定这是否正确。

希望我已经对此进行了很好的解释，但是如果没有，请告诉我。

使用JavaScript将选定的下拉菜单选项传递到新页面

0 个答案: