Multiple select boxes and Dynamically generated link
<p>I have very basic select menu. Currently it uses switch function. Based on the selection I can assign link to the button. The block for me here is how can I have multiple select boxes and based on at least to selectors to grab the link and assign it to the button. </p>

<p>For example in first select box I will have : Cars, Bikes, Jeeps. Based on the selection for example "Cars" I would like a second select box to show relevant choices (BMW 3, Audi A4 and etc). On change of the vehicle to show the relevant one. For example "Bikes" to show "Honda, Apprilia" and etc. Is this feasible with [my current code?</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(e) {
  $('#basic_plan').change(function(e) {
    var an = $(this).val();
    switch (an) {

      case "ann":
        $('.button-plans a').attr('href', "www.google.com");
        break;
      case "bi":
        $('.button-plans a').attr('href', "www.yahoo.com");
        break;
      case "tri":
        $('.button-plans a').attr('href', "www.bing.com");
        break;
        /* and so on*/
    }
  });
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="dropdown-plans"&gt;
  &lt;select id="basic_plan" name="bill_cycle"&gt;
    &lt;option value="tri"&gt;Cars&lt;/option&gt;
    &lt;option value="bi"&gt;Bikes&lt;/option&gt;
    &lt;option value="ann"&gt;Jeeps&lt;/option&gt;
  &lt;/select&gt;
&lt;/div&gt;
&lt;div class="button-plans"&gt;
  &lt;a id="abc" href="something"&gt; Visit now &lt;/a&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>