Changing the UserInput of a URL not working with multiple menus
<p>I have a user input form with multiple drop downs that display based on user selection. When a user selects an option from the 2nd drop down I would like to append that selection to a url. </p>

<p>Here's what I am working with: <a href="http://jsfiddle.net/Sxz4R/142/" rel="nofollow">http://jsfiddle.net/Sxz4R/142/</a></p>

<p>Here's the JS in question: </p>

<pre><code>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;
</code></pre>

<p>The issue is once the link is set it will not change again if a different option is selected from the first drop down menu. </p>

<p>Repro: </p>

<p>1) Select List of Colors </p>

<p>2) Select a color  -- Link will change </p>

<p>Without refreshing...</p>

<p>1) Select "List of Numbers" from drop down </p>

<p>2) Select a number -- Link does not change </p>

<p>How do I get the link to change if the user decides to select a new option from the first menu? </p>
