Adding dynamically URL to select box

Question

I have the following select menus: JSFIDDLE. So far it all works as intended. My only issue is how can I built the URL on top of the already existing one. For example when you select the Bikes option and click on visit now it will redirect you to www.yahoo.com. What I want to do is when option from the second select box is chosen to add the extra bit of the already existing url. For example Bikes: www.yahoo.com >> Bikes-->Bike2 = www.yahoo.com/bike2. I

PS: what I am trying to avoid is adding manually the whole URL. I would like to add just the bit "/bike2" to the alredy existing URL. Can someone help?

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

  $('.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;
    }
  });
});

.second-select {
  margin-top: 5px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/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>
  <br />
  <select id="cars" class="second-select">
    <option value="1">Car1</option>
    <option value="2">Car2</option>
    <option value="3">Car3</option>
  </select>
  <select id="bikes" class="second-select">
    <option value="1">Bike1</option>
    <option value="2">Bike2</option>
    <option value="3">Bike3</option>
  </select>
  <select id="jeeps" class="second-select">
    <option value="1">Jeep1</option>
    <option value="2">Jeep2</option>
    <option value="3">Jeep3</option>
  </select>
</div>
<div class="button-plans">
  <a id="abc" href="#"> Visit now </a>
</div>

By the way, a more reliable way to do this is to use a form, replace the link with a submit button, and redirect the user server-side. [Your button can look like a link](http://stackoverflow.com/a/22076149/1094772) if that's your concern. — rybo111, Mar 31 '16 at 08:34

score 3 · Accepted Answer · edited Mar 31 '16 at 08:45

Here is a working Fiddle

And changes to your second dropdown change function

 $('.second-select').change(function() {
    var an = $(this).val();
    var text = $(this).find('option:selected').text();
    var anchorTag = $('#abc');
    switch (an) {
      case "1":
        anchorTag.attr('href', anchorTag.attr('href')+'/' + text);
        break;
      case "2":
        anchorTag.attr('href', anchorTag.attr('href')+'/' +text);
        break;
      case "3":
        anchorTag.attr('href',  anchorTag.attr('href')+'/' +text);
        break;
    }
  });

But this code if you change the dropdown selections multiple times the final URL will be a mess, as we are not clearing the existing one nor manipulating it to get it right. This approach would be a mess and error prone.

I would suggest to calculate the URL when the visit now is clicked and then redirect to that link. Here is a Working Fiddle

And your complete script will look like.

$(document).ready(function() {
  $('#basic_plan').change(function() {
    $('.second-select').hide();
    var an = $(this).val();
    switch (an) {
      case "ann":       
        $('#jeeps').show();
        break;
      case "bi":       
        $('#bikes').show();
        break;
      case "tri":       
        $('#cars').show();
        break;
        /* and so on */
    }
  });

  $('#abc').on('click',function(e){
   e.preventDefault();
   var anchorUrl = GetMainLink();
   window.open(anchorUrl, '_blank'); //open the link
  });


  function GetMainLink(){
    var mainSelection = $('#basic_plan').val();
    switch (mainSelection) {
      case "ann": return "www.google.com" + '/' + $('#jeeps').find('option:selected').text();        
        break;
      case "bi":return "www.yahoo.com"+ '/' + $('#bikes').find('option:selected').text();       
        break;
      case "tri":return "www.bing.com"+ '/' + $('#cars').find('option:selected').text();      
        break;
        /* and so on */
    }
  }

});

Here the advantage is that even if the drop downs are not changed the URL's correctly opened.

Try without changing the first dropdown, Also try without changing the second drop down.

This doesn't work correctly if you change between the second select multiple times. You end up with urls like `www.yahoo.com/Bike2/Bike3/Bike1/Bike2/Bike3` — Jamie Dunstan, Mar 31 '16 at 08:19
I am not sure because if the second option is chosen more than once, the values keeps on appending. `www.yahoo.com/Bike2/Bike3` — SASM, Mar 31 '16 at 08:20
Yes I've just noticed the same. Is there any workaround that? — John, Mar 31 '16 at 08:23
"This approach would be a mess and `error porn`." Hehe, error porn :) — Jamie Dunstan, Mar 31 '16 at 08:34
@Reddy looks good. The only question is instead of the text how can I add custom URL bit? Instead of www.yahooo.com/bike2 which is the name of the selection I would like to add custom but like www,yahoo.com/result-bikes? — John, Mar 31 '16 at 08:35
@John where do you get this bit `result-bikes` from either hardcode it or if you want it to be generic set the `data-custom-bit="result-bike"` and the instead of taking text take this data value. like `$('#jeeps').find('option:selected').data("custom-bit")` — Rajshekar Reddy, Mar 31 '16 at 08:37
@Reddy it will be hardcoded but different for every selection from the second dropdown — John, Mar 31 '16 at 08:39
@John just put in the data attribute and use it as I suggested, — Rajshekar Reddy, Mar 31 '16 at 08:40

score 0 · Answer 2 · answered Mar 31 '16 at 08:19

Maybe something like this(does not working with auto option, but when you select something works):

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

  $('.second-select').change(function() {
    var an = $(this).val();
    var domain = $('.button-plans a').attr('href').split("/")[0];
    var link  = domain +"/"+ $(this).attr("id")+ an;
    
    
    switch (an) {
      case "1":
        $('.button-plans a').attr('href', link);
        break;
      case "2":
        $('.button-plans a').attr('href', link);
        break;
      case "3":
        $('.button-plans a').attr('href', link);
        break;
    }
  });
});

.second-select {
  margin-top: 5px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/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>
  <br />
  <select id="cars" class="second-select">
    <option value="1">Car1</option>
    <option value="2">Car2</option>
    <option value="3">Car3</option>
  </select>
  <select id="bikes" class="second-select">
    <option value="1">Bike1</option>
    <option value="2">Bike2</option>
    <option value="3">Bike3</option>
  </select>
  <select id="jeeps" class="second-select">
    <option value="1">Jeep1</option>
    <option value="2">Jeep2</option>
    <option value="3">Jeep3</option>
  </select>
</div>
<div class="button-plans">
  <a id="abc" href="#"> Visit now </a>
</div>

score 0 · Answer 3 · answered Mar 31 '16 at 08:26

I just changed some things in the second select:

$('.second-select').change(function() {
var an = $(this).val();
$('#basic_plan').change();
switch (an) {
  case "1":
    $('.button-plans a').attr('href', $('.button-plans a').attr('href')+"/extra");
    break;
  case "2":
    $('.button-plans a').attr('href', $('.button-plans a').attr('href')+"/extra2");
    break;
  case "3":
    $('.button-plans a').attr('href', $('.button-plans a').attr('href')+"extra3");
    break;
}
});

score 0 · Answer 4 · answered Mar 31 '16 at 08:28

This will do the trick.

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

$('.second-select').change(function() {
    var an = $(this).val();
    var text = $(this).find('option:selected').text();
    switch (an) {
      case "1":
        $('.button-plans a').attr('href', carUrl+'/' + text);
        break;
      case "2":
        $('.button-plans a').attr('href', bikeUrl+'/' + text);
        break;
      case "3":
        $('.button-plans a').attr('href', jeepUrl+'/' + text);
        break;
    }
  });
});

Here is the fiddle

Adding dynamically URL to select box

4 Answers4