javascript - 在多个选择框 JQuery 上动态生成 URL

Question

我有两个基于用户选择的选择框，我正在获取初始 URL 并从第二个选择中添加额外的位。我这里的困难是如何获得第二个 URL(动态计算)并向其添加 URL 的第 3 位？

示例:

1. 用户从第一个选择框“Bike”和 url = www.google.com/中选择

2. 用户从第二个选择框“Bike2”中选择，url 变为:www.google.com/bike2

3. 用户从第三个选择框“Bike3”中选择，url 变为:www.google.com/bike2/bike3

我的“两个选择框” 的工作版本可以在这里找到:JSFIDDLE

可以在此处找到具有“三个选择框” 的其他选项:JSFIDDLE

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

  $('#cars').change(function() {
    $('.third-select').hide();
    var an = $(this).val();
    switch (an) {
      case "1":
        $('#cars-third-option').show();
        $('#bikes-third-option').hide();
        $('#jeeps-third-option').hide();
        break;
      case "2":
        $('#cars-third-option').show();
        $('#bikes-third-option').hide();
        $('#jeeps-third-option').hide();
        break;
      case "3":
        $('#cars-third-option').show();
        $('#bikes-third-option').hide();
        $('#jeeps-third-option').hide();
        break;
        /* and so on */
    }
  });
  $('#bikes').change(function() {
    $('.third-select').hide();
    var an = $(this).val();
    switch (an) {
      case "1":
        $('#bikes-third-option').show();
        $('#cars-third-option').hide();
        $('#jeeps-third-option').hide();
        break;
      case "2":
        $('#bikes-third-option').show();
        $('#cars-third-option').hide();
        $('#jeeps-third-option').hide();
        break;
      case "3":
        $('#bikes-third-option').show();
        $('#cars-third-option').hide();
        $('#jeeps-third-option').hide();
        break;
        /* and so on */
    }
  });
  $('#jeeps').change(function() {
    $('.third-select').hide();
    var an = $(this).val();
    switch (an) {
      case "1":
        $('#jeeps-third-option').show();
        $('#cars-third-option').hide();
        $('#bikes-third-option').hide();
        break;
      case "2":
        $('#jeeps-third-option').show();
        $('#cars-third-option').hide();
        $('#bikes-third-option').hide();
        break;
      case "3":
        $('#jeeps-third-option').show();
        $('#cars-third-option').hide();
        $('#bikes-third-option').hide();
        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 */
    }
  }

});

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

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

Answer 1

更新了您的代码。试试这个

$('#abc').on('click',function(e){
   e.preventDefault();
    var anchorUrl = "www.bing.com/"+$("#basic_plan :selected").text();
    $("select[style='display: inline-block;'] :selected").each(function(index, element){
    anchorUrl += "/"+$(this).text()
    })
    console.log(anchorUrl);
  window.open(anchorUrl, '_blank'); //open the link
  });

JsFiddle