在多个选择框JQuery

时间：2016-03-31 09:34:14

标签： javascript jquery html css

我有两个基于用户选择的选择框我正在获取初始URL并添加第二个选择中的额外位。我的困难在于如何获取第二个URL（动态计算）并向其添加第三位URL？

示例：

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

  2. 用户从第二个选择框“Bike2”中选择并且网址变为：www.google.com/bike2

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

    4. 我的 “两个选择框” 的工作版本可在此处找到：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>

2 个答案:

答案 0 :(得分：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

答案 1 :(得分：0)

我建议你将全局变量存储为空字符串，然后将每一位添加到它。

示例：

var url = "";

// Selectbox gets selected (first url)
url =  selectbox_val;  // url = "www.google.com";

// Second selection
url = url + "/"+ second_selectbox_val; // url = "www.google.com" + "/" + "param1";

// third selection
url = url + "/"+ third_selectbox_val; // url = "www.google.com/param1" + "/" + "param2";

结果将是url = "www.google.com/param1/param2".

无需过于复杂化的事情：）

使用您的代码 

   $(document).ready(function() {
  var url = "";
  $('#basic_plan').change(function() {
    $('.second-select').hide();
    var an = $(this).val();
    url = url + "/" + $(this).text();
    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();
    url = url + "/" + $(this).text();
    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();
    url = url + "/" + $(this).text();
    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();
    url = url + "/" + $(this).text();
    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();
    url = anchorUrl + "/" + url;
    window.open(anchorUrl, '_blank'); //open the link
  });


  function GetMainLink() {
    var mainSelection = $('#basic_plan').val();
    switch (mainSelection) {
      case "ann":
        return "http://www.google.com" + '/' + $('#jeeps').find('option:selected').text();
        break;
      case "bi":
        return "http://www.yahoo.com" + '/' + $('#bikes').find('option:selected').text();

        break;
      case "tri":
        return "http://www.bing.com" + '/' + $('#cars').find('option:selected').text();

        break;
        /* and so on */
    }
  }

});
相关问题
最新问题