動態下拉菜單-根據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

計算時，您可以創建一個元素，並使用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解釋window.open（）