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

Question

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

<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我想要的cat.

Answer 1

尝试选项

function myNewFunction(sel) {
  alert(sel.options[sel.selectedIndex].text);
}

<select id="box1" onChange="myNewFunction(this);">
  <option value="98">dog</option>
  <option value="7122">cat</option>
  <option value="142">bird</option>
</select>

Answer 2

简单的JavaScript

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

jQuery的:

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

Answer 3

所有这些功能和随机的东西,我认为最好使用它,并这样做:

this.options[this.selectedIndex].text

Answer 4

据我所知，有两种解决方案。

两者都只需要使用 vanilla javascript

1 个已选选项

现场演示

const log = console.log;
const areaSelect = document.querySelector(`[id="area"]`);

areaSelect.addEventListener(`change`, (e) => {
  // log(`e.target`, e.target);
  const select = e.target;
  const value = select.value;
  const desc = select.selectedOptions[0].text;
  log(`option desc`, desc);
});

<div class="select-box clearfix">
  <label for="area">Area</label>
  <select id="area">
    <option value="101">A1</option>
    <option value="102">B2</option>
    <option value="103">C3</option>
  </select>
</div>

2个选项

现场演示

const log = console.log;
const areaSelect = document.querySelector(`[id="area"]`);

areaSelect.addEventListener(`change`, (e) => {
  // log(`e.target`, e.target);
  const select = e.target;
  const value = select.value;
  const desc = select.options[select.selectedIndex].text;
  log(`option desc`, desc);
});

<div class="select-box clearfix">
  <label for="area">Area</label>
  <select id="area">
    <option value="101">A1</option>
    <option value="102">B2</option>
    <option value="103">C3</option>
  </select>
</div>

Answer 5

HTML:

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

JavaScript的:

function myNewFunction(element) {
    var text = element.options[element.selectedIndex].text;
    // ...
}

演示: http ://jsfiddle.net/6dkun/1/

Answer 6

用 -

$.trim($("select").children("option:selected").text())   //cat

这是小提琴 - http://jsfiddle.net/eEGr3/

Answer 7

使用普通 JavaScript

onChange = { e => e.currentTarget.options[e.selectedIndex].text }

如果值在循环内，将为您提供准确的值。

Answer 8

ECMAScript 6+

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

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