title: Dynamic Dropdown menu - change button URL depending on option selected with JavaScript
body: <p>So I have a 'cost calculator' which is very similar (in terms of the code) to this example on <a href="https://jsfiddle.net/td3j5frn/" rel="nofollow noreferrer">JSFiddle</a>.</p>
  
  <p>But I would like to take this one step further. So currently, when you select an option from each of the dropdown menus, the cost is shown straight away which is great.</p>
  
  <p>I would like to now add a button (or link) beneath that, so that depending on the options selected, not only does the cost update, but the button/link updates automatically depending on what is selected so that the user can then go to a new page if this makes sense?</p>
  
  <p>And if the user doesn't click the button/link to go to the new page, but then decides to change an option on the dropdown menu, the link will update again automatically.</p>
  
  <p>Any help would be much appreciated.</p>
  
  <pre><code>&lt;form name="costcalculator"&gt;
    &lt;div class="package-type"&gt;
      &lt;select name="packageType" id="packageType" onchange="setMonths(this.value)"&gt;
        &lt;option value="gold"&gt;Gold&lt;/option&gt;
        &lt;option value="silver"&gt;Silver&lt;/option&gt;
        &lt;option value="bronze"&gt;Bronze&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  
    &lt;div class="months"&gt;
      &lt;select name="months" id="months"&gt;
        &lt;option value="1"&gt;1 month&lt;/option&gt;
        &lt;option value="2"&gt;2 months&lt;/option&gt;
        &lt;option value="3"&gt;3 months&lt;/option&gt;
        &lt;option value="4"&gt;4 months&lt;/option&gt;
        &lt;option value="5"&gt;5 months&lt;/option&gt;
        &lt;option value="6"&gt;6 months&lt;/option&gt;
        &lt;option value="7"&gt;7 months&lt;/option&gt;
        &lt;option value="8"&gt;8 months&lt;/option&gt;
        &lt;option value="9"&gt;9 months&lt;/option&gt;
        &lt;option value="10"&gt;10 months&lt;/option&gt;
        &lt;option value="11"&gt;11 months&lt;/option&gt;
        &lt;option value="12"&gt;12 months&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  
    &lt;button type="button" onclick="calculatePrice()"&gt;Calculate&lt;/button&gt;
    &lt;div id="price"&gt;&lt;/div&gt; 
  &lt;/form&gt;
  </code></pre>
  
  <p>And the JavaScript:</p>
  
  <pre><code>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&lt;=maxMonths; i++){
      var opt = document.createElement('option');
      opt.value = i;
      opt.innerHTML = i +  (i &gt; 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;
  }
  </code></pre>