javascript - onchange dropdown add parameters to url in inputbox

Question

i am designing affiliate program, in which each user has his own link-code aka tracking url. and i am willing to add extra parameters to it depending on the drop down selection which will be different landing pages.

e.g. original url

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

and if user selects value from down the url should be like

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

i am using this code for displaying the url to the end user in the input box set as readonly.

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

by selecting option 1 it should add /queryid/1 to the end of the url. if none is selected then no change will be there.

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

by selecting landing 1 will add /cid/1 to the end of the url. if none is selected then no change will be there.

so how do i do this ?

Thanks for your time.

update: updated the values of dropdown as currently using htaccess rewrite rules.

update: i am using as specified by "Rishi Php" demo is here http://jsfiddle.net/g6U4a/2/

but by default its not showing SourceUrl it should show the source url by default , in the box but it shows it when user changes drop down values. how can i achieve this ??

update: "Rishi Php" fixed the issue of on load default url. here is the code. http://jsfiddle.net/g6U4a/3/ Thanks to all of you guys.

dont forget to add this in header

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

replaced

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

with

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

so each affiliate will have unique link

Answer 1

Try this... It 'll help. *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);
}