javascript - onchange 下拉列表将参数添加到输入框中的 url

Question

我正在设计联属计划，其中每个用户都有自己的链接代码(又名跟踪 URL)。我愿意根据下拉选择添加额外的参数，这将是不同的登陆页面。

例如原文网址:

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

如果用户从下方选择值，则 URL 应类似于:

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

我使用此代码在设置为只读的输入框中向最终用户显示 URL。

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

会有两个像这样的下拉菜单。

<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 添加到网址末尾。如果没有选择，则不会有任何变化。

<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>

通过选择landing 1会将/cid/1添加到URL末尾。如果没有选择，则不会有任何变化。

那么我该怎么做呢？

更新:更新了当前使用 htaccess 重写规则的下拉列表值。

更新:
我正在按照“Rishi Php”演示的指定使用这里 http://jsfiddle.net/g6U4a/2/

但默认情况下不显示SourceUrl默认情况下，它应该在框中显示源 URL，但当用户更改下拉值时它会显示它。我怎样才能实现这个目标？

更新:
“Rishi 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;?>";

因此每个附属机构都会有唯一的链接

Answer 1

试试这个...会有帮助的。 <强> *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);
}