動態添加URL以選擇框

Question

我有以下選擇菜單： JSFIDDLE 。 到目前為止，一切都按預期進行。 我唯一的問題是如何在已經存在的URL上構建URL。 例如，當您選擇“自行車”選項並單擊“立即訪問”時，它將把您重定向到www.yahoo.com。 我想做的是從第二個選擇框中選擇選項來添加已經存在的URL的額外位。 例如，自行車：www.yahoo.com >>自行車-> Bike2 = www.yahoo.com/bike2。 一世

PS：我要避免的是手動添加整個URL。 我只想在已存在的現有網址中添加“ / bike2”位。 有人可以幫忙嗎？

 $(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> 

Answer 1

這是一個工作的小提琴

並更改您的第二個下拉更改功能

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

但是，如果您多次更改下拉選項，則此代碼的最終網址將是一團糟，因為我們既不清除現有網址也不對其進行操作以使其正確無誤。 這種方法很容易出錯。

---

我建議單擊立即訪問后計算URL，然后重定向到該鏈接。 這是一個工作小提琴

您的完整腳本將如下所示。

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

});

這樣做的好處是，即使下拉菜單沒有更改，URL也會正確打開。

嘗試不更改第一個下拉菜單，也請嘗試不更改第二個下拉菜單。

Answer 2

也許是這樣的（不適用於自動選項，但是當您選擇某些選項時可以使用）：

 $(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> 

Answer 3

我只是在第二選擇中更改了一些內容：

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

Answer 4

這將達到目的。

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

這是小提琴