堆棧內存溢出
  簡體   English   中英

在多個選擇框JQuery上動態生成URL

[英]Dynamically generating URL on multiple select boxes JQuery

 原文  2016-03-31 09:34:13  2   2    javascript/ jquery/ html/ css

問題描述

我有兩個基於用戶選擇的選擇框，我在獲取初始URL，並在第二個選擇中添加了額外的位。 我的困難是如何獲取第二個URL（動態計算）並向其中添加URL的第3位？

例：

  1. 用戶從第一個選擇框“自行車”中選擇，網址= www.google.com/

  2. 用戶從第二個選擇框“ Bike2”中進行選擇，網址變為：www.google.com/bike2

  3. 用戶從第三個選擇框“ Bike3”中進行選擇，網址變為：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>

2 個解決方案

解決方案1
 1 已采納  2016-03-31 10:20:55

更新了您的代碼。 嘗試這個 

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

解決方案2
 0  2016-03-31 10:17:50

我建議您將全局變量存儲為空字符串，然后將所有位添加到其中。

例： 

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

});

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 多個選擇框和動態生成的鏈接 在動態加載的多個選擇框中填充值 jQuery獲取多個選擇框的選定值 jQuery填充多個具有相同名稱的選擇框 jQuery獲取多個選擇框的值作為數組 jQuery基於多個選擇框的json過濾器 如何使用jquery重置表單中的多個選擇框？ jQuery將腳本應用於多個選擇框 使用Jquery訪問和驗證表中的多個選擇框 動態添加選擇框
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM