JSFiddle - React, Tailwind, and code Playground
HTML
This will be your link : <a href="" id=lnk>Nothing to see yet</a> <br>
<select id="option">
<option>Make a Selection</option>
<option value="colors">Search by color</option>
<option value="numbers">A list of numbers</option>
</select>
<div id="colors" class="choice">
<select class="detail userInput">
<option>Make a Selection</option>
<option>red</option>
<option>blue</option>
<option>green</option>
</select>
</div>
<div id="numbers" class="choice">
<select class="detail userInput">
<option>Make a Selection</option>
<option>number one</option>
<option>number two</option>
<option>number three</option>
</select>
</div>
CSS
.choice {
display:none;
}
JavaScript
$(window).load(function(){
$('#option').change(function(){
$('.choice').hide();
$('#' + $(this).val()).show('normal');
});
$('.userInput').change(function(){
var lnk = $('#lnk')[0];
lnk.href = 'http://google.com?q=' + encodeURIComponent(this.value);
lnk.innerHTML = lnk.href;
});
});