Question

我有这样的事情：

select = document.getElementById("select");
select.onchange = function(){
  alert(this.value); //returns the selected value
  alert(this.innerHTML); //returns the entire select with all the options
  alert(this.selected.innerHTML); //this is what I want, but doesn't work, of course
};

如何在纯js中获取所选选项的innerHTML？（没有框架）。

Answer 1

尝试：

alert(this.options[this.selectedIndex].text);

演示：

<select onchange="alert(this.options[this.selectedIndex].text)">
  <option>foo
  <option>bar
  <option>foobar
</select>

Answer 2

我没有测试过，但这可能有用：

alert(this.options[this.selectedIndex].innerHTML)

Answer 3

这样可行。

select = document.getElementById("select");
select.onchange = function(){
    alert(this.value); //returns the selected value
    alert(this.innerHTML); //returns the entire select with all the options
    var options = this.getElementsByTagName("option");
    var optionHTML = options[this.selectedIndex].innerHTML;  
    alert(optionHTML); //this is what I want, but it works now
};

Answer 4

在做了一些研究之后，似乎浏览器（无论如何都是Chrome）会从选项值中删除标记，从而无法获得实际的HTML代码。例如，给定以下HTML：

<html>
  <body>
    <select>
      <option><b>test 1</b></option>
      <option><b>test 2</b></option>
    </select>
  </body>
</html>

document.getElementsByTagName('select')[0].options[0].text返回'test 1'
document.getElementsByTagName('select')[0].options[0].innerHTML返回'test 1'
document.getElementsByTagName('select')[0].options[0].firstChild返回包含“test 1”
document.getElementsByTagName('select')[0].firstChild.nextSibling返回第一个选项节点。它的第一个孩子是文本节点'test 1'

Answer 5

我建议使用以下代码段：

alert(this.selectedOptions[0].text)

演示：

<select onchange="alert(this.selectedOptions[0].text)">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>

selectedOptions 是一个HTML集合，其中包含所有选中的选项。在使用多选功能时，使用此代码段比 this.options [this.selectedIndex] 有更多优势。如果是多选下拉列表，则 this.selectedOptions 将包含所有选中的元素。您可以遍历此集合以获取所有选定项的innerHTML。

获取所选选项的内部html

5 个答案: