多个选择框和动态生成的链接

Question

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.

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?

 $(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*/ } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="dropdown-plans"> <select id="basic_plan" name="bill_cycle"> <option value="tri">Cars</option> <option value="bi">Bikes</option> <option value="ann">Jeeps</option> </select> </div> <div class="button-plans"> <a id="abc" href="something"> Visit now </a> </div> 

Answer 1

I added a class to the new select elements to make them hidden by default (and when change() triggers), then altering its visibility depending on the choice you make on their id :

$(document).ready(function() {
  $('#basic_plan').change(function() {
    $('.second-select').hide();
    var an = $(this).val();
    switch (an) {
      case "ann":
        $('.button-plans a').attr('href', "www.google.com");
        $('#jeeps').show();
        break;
      case "bi":
        $('.button-plans a').attr('href', "www.yahoo.com");
        $('#bikes').show();
        break;
      case "tri":
        $('.button-plans a').attr('href', "www.bing.com");
        $('#cars').show();
        break;
        /* and so on */
    }
  });
});

For second select element:

$('.second-select').change(function() {
    var an = $(this).val();
    switch (an) {
      case "1":
        $('.button-plans a').attr('href', "www.example.com");
        break;
      case "2":
        $('.button-plans a').attr('href', "www.bitbucket.org");
        break;
      case "3":
        $('.button-plans a').attr('href', "www.facebook.com");
        break;
    }
  });
});

JsFiddle demo

Note : The reason you get a 404 from the anchor(s) is that JsFiddle adds a default URL and your link as URI.

Answer 2

You can do that :

$(document).ready(function(e) {
  $('#basic_plan').change(function() {
    $('.button-plans a').attr('href', $(this).find('option:selected').attr('data-url'));
  });
});

see https://jsfiddle.net/6oemzgbo/

Its works.