Getting selected option value inside span tag

Question

I need to get the selected option value which resides insides a span tag.

<span id ="resolutionSpan">

    <select name="resolution" id="resolution">
    <option value="0" selected >0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>     
    </select>

</span>

I have tried

var e = document.getElementById("resolution");
console.log( e.options[e.selectedIndex].text);

But that returns a null value. Do i need to iterate the span first?

Due to project limitations, i cant use jquery. Need ur comments in javascript

Answer 1

Get the .options , then .selectedIndex , then .text . Like this:

 var selected = document.getElementById('resolution').options[document.getElementById('resolution').selectedIndex].text alert(selected); 

 <span id ="resolutionSpan"> <select name="resolution" id="resolution"> <option value="0" selected >0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> </span> 

Hope this helps!

Answer 2

I believe .text selects the label.

If you want the value of the selected item use .value.

fiddle: http://jsfiddle.net/9wxqmLL1/

var e = document.getElementById("resolution");
console.log( e.options[e.selectedIndex].value);

Answer 3

Your code is actually very close, just change .text to .value:

var e = document.getElementById("resolution");
console.log( e.options[e.selectedIndex].value);

unless you wanted to get the actual content of the option (which in this case is the same value but still)

var e = document.getElementById("resolution");
console.log( e.options[e.selectedIndex].innerHTML);