Question

因此，我有一个“费用计算器”，与代码中的JSFiddle上的示例非常相似。

但是我想更进一步。因此，当前，当您从每个下拉菜单中选择一个选项时，费用会立即显示出来，这真是太好了。

我现在想在其下添加一个按钮（或链接），以便根据所选的选项，不仅成本会更新，而且按钮/链接也会根据所选内容自动更新，以便用户可以然后在有意义的情况下转到新页面？

如果用户没有单击按钮/链接进入新页面，而是决定更改下拉菜单上的选项，则链接将自动再次更新。

任何帮助将不胜感激。

<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>

和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;
}

Answer 1

在计算时，您可以创建一个元素，并使用setAttribute方法为其提供任何自定义网址。在下一次单击上，您可以检查a标签是否已经存在，并且是否确实删除了旧标签，然后创建一个新标签，并使用新的文本和链接对其进行更新

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;
  if(document.querySelector('#link'))
  {
 document.querySelector('#link').parentNode.removeChild(document.querySelector('#link').parentNode.querySelector('#link'))
  }
  var a=document.createElement('a');
  a.innerHTML=package
  a.setAttribute('href','/'+package);
  a.setAttribute('id','link')
  document.querySelector('#f').appendChild(a)
  
}

<form name="costcalculator" id="f">
  <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>

Answer 2

添加一个按钮，该按钮触发一个函数以生成指向您下一页的链接。

HTML ： <button type="button" onclick="goToSite()">go to Site</button>

JavaScript

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

    window.open('https://your.site.com/' + package + '/' + months + '/' + price, '_self');
}

您可以在此处阅读有关通过Javascript打开页面的更多信息： w3schools Explanation window.open()

动态下拉菜单-根据JavaScript选择的选项更改按钮URL

2 个答案: