javascript - 动态添加 URL 到选择框

Question

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

PS:我想避免的是手动添加整个 URL。我想将位“/bike2”添加到现有的 URL 中。有人可以帮忙吗？

$(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 将是一团糟，因为我们不会清除现有的，也不会对其进行操作以使其正确。这种方法会很困惑并且容易出错。

---

我建议在点击访问时计算 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 也能正确打开。

尝试不更改第一个下拉菜单，也尝试不更改第二个下拉菜单。