查找<select>中选择的<Option>(不带JQuery)

Question

我有以下元素:

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

我想找到选择的选项:

以下仅给出了默认值:

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

(我知道如何使用JQuery,但我不能使用jQuery或任何其他类似的库)

Answer 1

使用:checked选择器.这适用于复选框,广播和选择

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

对于节点

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

为了价值

Answer 2

在普通的JavaScript中:

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

JsBin示例:http://jsbin.com/ogunet/1/edit (打开你的js控制台)