Question

我有一个简单的选择标签：

<select>
  <option></option>
  <option></option>
</select>

然后我想用jQuery获取选项的内容：

var s=$('select option');
for(var i=0;i<s.length;i++){
    console.log(s[i]);
}

只显示"<option>"，没有内容。

如果我使用console.log(s[i].html());，它会告诉我这是错误的。

那么如何获取内容？

Answer 1

您不需要jQuery来获取文本内容。

HTMLOptionElement具有.text属性。

var s = $('select option');

for(var i = 0; i < s.length; i++) {
    console.log(s[i].text);
}

虽然如果你想要元素的.outerHTML（你的问题有点困惑），你可以这样做......

var s = $('select option');

for(var i = 0; i < s.length; i++) {
    console.log(s[i].outerHTML);
}

...虽然这最近才在Firefox中推出，所以你可以创建一个方法来修补它......

function outerHTML(el) {
    return el.outerHTML || document.createElement('div')
                                   .appendChild(el.cloneNode(true))
                                   .parentNode
                                   .innerHTML;
}

...并像这样使用它......

var s = $('select option');

for(var i = 0; i < s.length; i++) {
    console.log(outerHTML(s[i]));
}

Answer 2

假设'content'是指选项的文本值，请尝试：

$("select option").each(function() {
    console.log($(this).text());
});

Answer 3

使用text()方法提取元素的文本节点值

如何使用jQuery </option>获取html <option>标签的内容

3 个答案: