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

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

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

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

Answer 2

在计算时，您可以创建一个 a 元素并使用 setAttribute 方法为其提供任何自定义 url。在下一次单击时，您可以检查 a 标签是否已经存在，如果它确实首先删除旧的 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>