JSFiddle - React, Tailwind, and code Playground

HTML

<br/><br/><br/>
<input type="text" value="" id="urlBox" readonly /> 
<a id="MyLink" target="_blank" href="">Go</a>
<br/><br/>
<select id="querySelct">
<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>

<select id="landingSelect">
<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>

CSS

#urlBox {
    width:500px;
}

JavaScript

var SourceUrl = "http://www.google.com/?tracker=blah1";
var queryUrl = "";
var landingUrl = "";
$(function() {
  //For showing default url  
  MakeUrl();
    
  $('#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);
}