select要素内のテキストとは

Question

をSELECT内に配置すると、次のJavaScriptコードが使用されています。OPTIONをすべて検索しようとしています。

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

とHTMLマークアップは、この

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

である。しかし、それは、Google Chromeブラウザで私に次のような出力を提供します

ので、すべてのオプションの前につくれ出力内のテキストが何でありますか。

Answer 1

Node.childNodes読み取り専用のプロパティは、指定された要素の子ノードのライブコレクションを返します。子ノードは、例えば、テキストノードとコメント。それらをスキップするには、代わりにParentNode.childrenを使用します。[ドキュメントから]

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

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

Answer 2

あなたはselect要素のoptionsプロパティを使用する必要があり、

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

childNodesはまた、あなたの空のテキストノード（白スペース/リターン）を得ます。したがって、optionsを使用することをお勧めします。他の賢明なあなたはselect要素の上にquerySelectorAllを使用することができます。

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

Answer 3

テキスト値は、このために取得するものである：今

<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>オブジェクトが、この使用したい場合：純粋なJavaScriptを使用して

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

を

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 4

これを試すことができます。

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