onchange dropdown在輸入框中添加參數到url

我正在設計聯盟計劃，其中每個用戶都有自己的鏈接代碼又名跟蹤網址。，我願意添加額外的參數，取決於下拉選擇，這將是不同的着陸頁。onchange dropdown在輸入框中添加參數到url

例如原始地址

http://www.google.com/tracker/blah1

，並且如果用戶從下鏈接選擇值應該是這樣

http://www.google.com/tracker/blah1/queryid/1

我使用這個代碼，用於顯示鏈接到在設定爲只讀輸入框的最終用戶。

<input size="100" type="text" value="<?=$url;?>" readonly> &nbsp;- &nbsp;<a target="_blank" href="<?=$url;?>">Link</a></b>

theres gonna be two drop down like these。

<select name="niche"> 
<option value="0" label="choose one">choose one</option> 
<option value="/queryid/1" label="option 1">option 1</option> 
<option value="/queryid/2" label="option 2">option 2</option> 
<option value="/queryid/3" label="option 3">option 3</option> 
<option value="/queryid/4" label="option 4">option 4</option> 
<option value="/queryid/5" label="option 5">option 5</option> 
<option value="/queryid/6" label="option 6">option 6</option> 
</select>

通過選擇選項1應該添加/queryid/1到URL的結尾。如果沒有選擇，則不會有任何更改。

<select name="landingpage"> 
<option value="0" label="choose one">choose one</option> 
<option value="/cid/1" label="landing 1">landing 1</option> 
<option value="/cid/2" label="landing 2">landing 2</option> 
</select>

通過選擇着陸將添加/CID/1到URL的結尾。如果沒有選擇，則不會有任何更改。

那麼我該如何做到這一點？

謝謝你的時間。

更新：更新當前使用htaccess重寫規則的下拉列表的值。

更新： 由「仙人PHP」演示指定我現在用的就是這裏http://jsfiddle.net/g6U4a/2/

但默認情況下它沒有顯示SourceUrl 應該默認顯示源URL，在框，但它會在用戶更改下拉值時顯示它。我怎麼能做到這一點？

更新： 「仙人PHP」固定的負載默認URL的問題。這裏是代碼。 http://jsfiddle.net/g6U4a/3/ 感謝大家。

不要忘記在頭部添加此

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

更換

var SourceUrl = "http://www.google.com/?tracker=blah1";

與

var SourceUrl = "<?=$url;?>";

所以每個子公司都會有獨特的聯繫

來源

2013-03-26 AMB

嘗試......這是我將盡力幫助。 *UPDATED WORKING DEMO *

var SourceUrl = "http://www.google.com/?tracker=blah1"; 
var queryUrl = ""; 
var landingUrl = ""; 
$(function() { 
    $('#querySelct').on('change', function() { 
     if($(this).val() == 0) { 
     queryUrl = ""; 
     } else { 
      queryUrl = $(this).val(); 
     } 
     MakeUrl(); 
     return false; 
    }); 

    $('#landingSelect').on('change', function() { 
     if($(this).val() == 0) { 
     landingUrl = ""; 
     } else { 
     landingUrl = $(this).val(); 
     } 
    MakeUrl(); 
    return false; 
    }); 
}); 

function MakeUrl() { 
    var finalUrl = SourceUrl + queryUrl + landingUrl; 
    $('#urlBox').val(finalUrl); 
    $('#MyLink').attr('href', finalUrl); 
}

來源

2013-03-26 07:17:04

這是工作在jsfiddle，但不是在我的網站，我試着在標題中添加什麼也沒有，我怎麼能顯示默認的原始網址我的意思是，當它檢測到下拉變化時，Makeurl只會打電話。謝謝你的幫助。 – AMB 2013-03-26 08:19:04

使用像這樣，而不是「// ajax ...」使用像「http：// ..」 – 2013-03-26 08:36:31

它的工作現在，問題是在JavaScript中，我沒有複製thw整個腳本從jsfiddle。，謝謝 – AMB 2013-03-26 08:53:15

你可以這樣做這個：

<select id="yourSelect" name="landingpage"> 
<option value="" label="choose one">choose one</option> 
<option value="www.yourdomain.com&cid=1" label="landing 1">landing 1</option> 
<option value="www.yourdomain.com&cid=2" label="landing 2">landing 2</option> 
</select> 


$(function(){ 
    $('#yourSelect').on('change', function() { 
     var url = $(this).val(); 
     if (url) { 
      window.location = url; 
     } 
     return false; 
    }); 
});

來源

2013-03-26 04:10:26

的選擇框給選擇像

var urlToAppend1=$('#nicheId :selected').val(); 

originalurl='http://www.google.com/?tracker=blah1'; 
var url=''; 
url+=originalurl; 
url+=urlToAppend;

來源

2013-03-26 04:23:23 sasi

究竟如何，我是新來的JavaScript。 – AMB 2013-03-26 05:29:56

試試吧。

$(function(){ 
     $('select').change(function() { 

      var arr = new Array(); 
      $('select option:selected').each(function(){ 
       var value = $(this).val(); 
       if(value != "0"){ 
        arr.push($(this).val()); 
       } 
      }); 
      // selected value are now concatenating here. 
      var str = arr.join(''); 
      alert(str); 
     }); 

    });

來源

2013-03-26 04:42:10 Neo

究竟如何，我是JavaScript的新手。 – AMB 2013-03-26 05:29:03

將「str」變量與您的url字符串串聯起來，做你想做的事。例如：var url =「http://www.google.com/tracker/blah1"+str; – Neo 2013-03-26 06:37:40

可以使用的getElementById從<select>領域得到的值，並將其設置爲您的文本字段。

DEMO：http://jsfiddle.net/g6U4a/1/

HTML

<select id="queryid"> 
<option value="0" label="choose one">choose one</option> 
<option value="&queryid=1" label="option 1">option 1</option> 
<option value="&queryid=2" label="option 2">option 2</option> 
<option value="&queryid=3" label="option 3">option 3</option> 
<option value="&queryid=4" label="option 4">option 4</option> 
<option value="&queryid=5" label="option 5">option 5</option> 
<option value="&queryid=6" label="option 6">option 6</option> 
</select> 

<br> 

<select id="cid" name="landingpage"> 
<option value="0" label="choose one">choose one</option> 
<option value="&cid=1" label="landing 1">landing 1</option> 
<option value="&cid=2" label="landing 2">landing 2</option> 
</select> 

<input type="button" id="change" value="Create URL" onclick="createUrl()" /><br> 

<input type="text" id="result" placeholder="placeholder" readonly><br>

JAVASCRIPT

function createUrl() { 
    var google = "http://www.google.com/"; 
    document.getElementById("result").value = google + document.getElementById("queryid").value + document.getElementById("cid").value; 
}

來源

2013-03-26 05:50:08 Mal

onchange dropdown在輸入框中添加參數到url

回答

相關問題