动态添加URL到选择框

Question

我有以下选择菜单：JSFIDDLE。到目前为止，它都按预期工作。我唯一的问题是如何在已有的URL之上构建URL。例如，当您选择“自行车”选项并单击“立即访问”时，它会将您重定向到www.yahoo.com。我想要做的是选择第二个选择框中的选项来添加已存在的URL的额外位。例如Bikes：www.yahoo.com＆gt;＆gt;自行车 - ＆gt; Bike2 = www.yahoo.com/bike2。我

PS：我想避免的是手动添加整个网址。我想在alredy现有的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

这是 working Fiddle

更改第二个下拉列表更改功能

 $('.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将是一个烂摊子，因为我们没有清除现有的，也没有操纵它来使它正确。这种方法会很混乱，容易出错。

我建议您在点击访问时计算网址，然后重定向到该链接。这是 Working Fiddle

您的完整脚本将如下所示。

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

以下是fiddle