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 id='userInput' class="detail" onclick='javascript:changeText2()'>
	    <option>Make a Selection</option>
        <option>red</option>
		<option>blue</option>
	    <option>green</option>
    </select>
</div>
<div id="numbers" class="choice">
    <select id='userInput' class="detail" onclick='javascript:changeText2()'>
        <option>Make a Selection</option>
        <option>number one</option>
        <option>number two</option>
        <option>number three</option>
    </select>
</div>

CSS

.choice {
    display:none;  
}

JavaScript

function changeText2(){
    var userInput = document.getElementById('userInput').value;
    var lnk = document.getElementById('lnk');
    lnk.href = "http://google.com/?q=" + encodeURIComponent(userInput);
    lnk.innerHTML = lnk.href;
}

$(window).load(function(){
    $(function() {
	    $('#option').change(function(){
	        $('.choice').hide();
	        $('#' + $(this).val()).show('normal');
	    });
	});
});