Question

How do I display the selected option name in the div above it? If user has blue selected I want blue to show above.

<div id='text"> selection goes here</div>
<select id="dropdownselect">
<option> Red </option>
<option> White </option>
<option> Blue </option>
</select>

Answer 1

Use the following to get the text of the selected option:

var select = document.getElementById("dropdownselect");
var selectedText = select.options[select.selectedIndex].text;

Then, to add the value to the div with id text, use:

document.getElementById("text").innerHTML = selectedText;

If you want to reflect the selected value every time the option has changed, you need to attach the onchange event to the select, which, combined with the above code results in the following:

var select = document.getElementById("dropdownselect");
select.onchange = function () {
  var selectedText = this.options[this.selectedIndex].text;
  document.getElementById("text").innerHTML = selectedText;
};​

Here’s a working DEMO.