select元素中的文本是什么

Question

我正在尝试使用以下JavaScript代码查找OPTION内的所有SELECT。

var temp = document.querySelectorAll("select");
console.log(temp[0].childNodes);

和html标记就是这个

 <select>
    <option>1</option>
    <option>2</option>
 </select>

但是它在Google Chrome浏览器中提供了以下输出

那么在每个选项之前的输出中的文本是什么。

Answer 1

您必须使用options元素的select属性

var temp = document.querySelectorAll("select");
console.log(temp[0].options);

childNodes也会为您提供空文本节点（空格/返回）。因此建议使用options。另外，您可以在获取的querySelectorAll元素上使用select。

var temp = document.querySelectorAll("select");
console.log(temp[0].querySelectorAll("option"));

Answer 2

文本值是您为此检索的内容：

 <select id="selectid">
  <option value="volvo">Volvo text</option>  
  <option value="saab">Saab text</option>
  <option value="mercedes">Mercedes text</option>
  <option value="audi">Audi text</option>
 </select> 

现在，如果您希望所有<option>个对象都使用此功能：

$("#selectid option").each(function()
{
    //you get "each" option for the select in the id.
});

使用纯javascript

 function displayResult() {
var x = document.getElementById("selectid ");
var txt = "All options: ";
var i;
for (i = 0; i < x.length; i++) {
    txt = txt + "\n" + x.options[i].text;
}
alert(txt);
 }

Answer 3

你可以试试这个。

var selects = document.querySelectorAll("select");
var firstSelect = selects[0];
var firstSelectOptions = firstSelect.querySelectorAll("select");
// firstSelectOptions[0].innerText
// firstSelectOptions[0].innerText

Answer 4

  

Node.childNodes只读属性返回给定元素的子节点的实时集合。 childNodes还包括例如文本节点和注释。要跳过它们，请改用ParentNode.children。[来自文档]

＆＃13;

＆＃13;

var temp = document.querySelectorAll("select");
console.log(temp[0].children);

＆＃13;

<select>
  <option>1</option>
  <option>2</option>
</select>

＆＃13;

＆＃13;

＆＃13;