在没有 jQuery 的情况下获取 HTML 中选定的选项

Question

我在每个

<option>

上使用以下函数来确定它是否被选中：

var _matches = function(el, selector) {
  var fn = el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector;
  return fn.call(el, selector);
};

它在 NodeJS 中的

jsdom

中工作正常，并且它适用于浏览器中的选择器

:checked

（在复选框输入上），但 不适用于选择器 :selected

，这很奇怪。

我收到错误（在 Chrome 中）：

未捕获的语法错误：无法在“元素”上执行“匹配”：“：选择”不是有效的选择器。

Answer 1

错误消息似乎是正确的，

:selected

不是有效的选择器，甚至

querySelector('option:selected')

失败

有效的伪选择器是

:active
:checked
:default
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
:target
:valid
:visited

正确使用的伪类是

:checked

，

MDN 说

:checked

 CSS 伪类选择器代表任何单选 (

<input
  type="radio">

)、复选框 (

<input type="checkbox">

) 

或选项 (<option>

)
  在已选中或切换到开启状态的 

<select>

) 元素中

。

Answer 2

我选择使用以下表达式：

// check if any option has attribute selected
if(dom_node.querySelectorAll("select option[selected]").length)
{
...
}