Drop down product, put price in text field

Question

I need to create a simple drop-down menu with 5 items (widget1, widget2, widget3, etc..) and a corresponding value which is the price. When the user clicks the 'Price button' after selecting the widget, I need the price to show up in the text box. This is what I've pulled from other snippets, but can't figure out the second part after the 'var x' to insert it into the text area.

function displayResult()
{
var x=document.getElementById("dropdown").value;
}

And the html...

<form action="">
<select id="dropdown" >
<option value="$1">widget1</option>
<option value="$2">widget2</option>
<option value="$3">widget3</option>
<option value="$4">widget4</option>
</select>

<button type="button" onclick="displayResult()">Price</button>
</form>
<textarea = id="showprice" size="10" maxlength="10"></textarea>

Most of the examples I've found change the text box after the drop down is selected, I need it work after the button is clicked. Thanks

Answer 1

You're so close already. Just reverse the process you used to get the value but use the id of the textbox and set its value property:

function displayResult() {
   var x=document.getElementById("dropdown").value;
   document.getElementById("showprice").value = x;
}

If that is the only thing that displayResult() does you don't need the x variable:

document.getElementById("showprice").value = document.getElementById("dropdown").value;