Finding which is selected in <select&g

Question

I have the following Element:

<select id="color" name="colorId" class="btn secondary">
    <option value="347366" selected="selected">Purple</option>
    <option value="56634">White</option>
</select>

And I want to find which option is selected:

The following give me only the default:

document.querySelector('#color option[selected="selected"]')

(I know how to do it with JQuery but, I can't use jQuery or any other similar library)

Answer 1

Grab the <select> DOM element using getElementById() and take its parameter selectedIndex:

var select = document.getElementById( 'color' ),
    selIndex = select.selectedIndex;,
    selElement = select.getElementsByTagName( 'option' )[ selIndex ];

Answer 2

You can do this with querySelectorAll not querySelector

document.querySelectorAll('option:checked')[0].innerText

or

document.querySelectorAll('option:checked')[0].value

Answer 3

This will return selected option value and text both.. Hope this will work for u ..

Cheers

var elt = document.getElementById('color');

 // get option selected
    var option = elt.options[elt.selectedIndex].value;
    var optionText = elt.options[elt.selectedIndex].text;

Answer 4

Use the :checked selector. This applies to checkbox, radio, and select

document.querySelector('#color option:checked')

for the node

document.querySelector('#color option:checked').value

for the value

Answer 5

In plain javascript:

var select = document.getElementById('color');
var currentOpt = select.options[select.selectedIndex]; 

JsBin example: http://jsbin.com/ogunet/1/edit (open your js console)