使用JavaScript获取所选的选项文本

我有一个这样的下拉列表:

<select id="box1">
<option value="98">dog</option>
<option value="7122">cat</option>
<option value="142">bird</option>
</select>

我如何才能获得实际的选项文本，而不是使用JavaScript的值?我可以通过如下方式获取值:

<select id="box1" onChange="myNewFunction(this.selectedIndex);" >

但我想要猫而不是7122。

当前回答

纯JavaScript

var sel = document.getElementById("box1");
var text= sel.options[sel.selectedIndex].text;

jQuery:

$("#box1 option:selected").text();

其他回答

ECMAScript 6 +。

const select = document.querySelector("#box1");

const { text } = [...select.options].find((option) => option.selected);

纯JavaScript

var sel = document.getElementById("box1");
var text= sel.options[sel.selectedIndex].text;

jQuery:

$("#box1 option:selected").text();

您需要获取该选项的innerHTML，而不是它的值。

用这个。innerHTML代替this.selectedIndex。

编辑:首先需要获取option元素，然后使用innerHTML。

用这个。text代替this.selectedIndex。

使用jquery。在你看来

  let selText = $("#box1 option:selected").text();
  console.log(selText);

所有这些函数和随机的东西，我认为最好使用这个，像这样做:

this.options[this.selectedIndex].text

推荐文章