How do I pull the value from a selection of a HTML drop down menu?

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>

João Silva · Accepted Answer · 2012-09-01T02:49:39.643

3

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.

edited Sep 01 '12 at 02:49

answered Sep 01 '12 at 02:28

João Silva

89,303
29
152
158

Well I found the answer to my question http://stackoverflow.com/q/1359469/1331430 – Fabrício Matté Sep 01 '12 at 02:41
@FabrícioMatté: Thanks, I've switched to `innerHTML` since in this case the end result is the same. – João Silva Sep 01 '12 at 02:44
I'm getting the following "Uncaught TypeError: Cannot set property 'onchange' of null " – Sam Danger Sep 01 '12 at 03:23
@SamDanger Be sure that you've typed `dropdownselect` right, in the line above `onchange` event binding. – Rafael Adel Sep 01 '12 at 03:26
Double checked in Rafael. It matches. – Sam Danger Sep 01 '12 at 03:31

Mihai Iorga · Answer 2 · 2012-09-01T02:41:50.933

1

Just add onchange javascript event:

<div id="text"> selection goes here</div>
<select id="dropdownselect" onchange="document.getElementById('text').innerHTML = this.options[this.selectedIndex].text;">
    <option> Red </option>
    <option> White </option>
    <option> Blue </option>
</select>

edited Sep 01 '12 at 02:41

answered Sep 01 '12 at 02:29

Mihai Iorga

39,330
16
106
107

Whilst *correct*, it's a common practice to don't use inline event handlers, in order to have a clear separation between behaviour/javascript and presentation/markup. – João Silva Sep 01 '12 at 02:37
NO! Not me, I *never* *ever* casted a downvote here on StackOverflow. Check my profile. – João Silva Sep 01 '12 at 02:42
Hmm.. not working for me: `
` – Sam Danger Sep 01 '12 at 03:04

score 0 · Answer 3 · answered Sep 01 '12 at 02:26

0

You should use a javascript framework to make it much easier. I personally use jQuery, in which case the javascript to get the value is:

$("#dropdownselect").val()

And you can change it automatically with:

<select id="dropdownselect" onChange="$('#text').text($(this).val());">

Similar functions are available with MooTools, or other frameworks I haven't used before.

jQuery can be made available with:

<script src="jquery.js"><!-- assuming you have a jquery file at this location -->

answered Sep 01 '12 at 02:26

ronalchn

12,225
10
51
61

If the option's value attribute is not present then it will return the text – timidboy Sep 01 '12 at 02:40
Thanks Ronalchn. I'm using Jquery, but I im still getting a blank div. here is my code: `
` – Sam Danger Sep 01 '12 at 02:50
maybe try `onChange="$('#text').text($('#dropdownselect option:selected').text());"` – ronalchn Sep 01 '12 at 03:38

score 0 · Answer 4 · answered Sep 01 '12 at 02:30

0

var selectBox = document.getElementById("dropdownselect"),
    textDiv = document.getElementById("text");
textDiv.innerText = selectBox.options[selectBox.selectedIndex].text;

But i'd recommend using jQuery too.

answered Sep 01 '12 at 02:30

Rafael Adel

7,673
25
77
118

How do I pull the value from a selection of a HTML drop down menu?

4 Answers4