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

IT技术 javascript html dom drop-down-menu
2021-01-12 08:13:58

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

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

如何使用 JavaScript 获取实际选项文本而不是值？我可以通过以下方式获得value：

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

但不是7122我想要的cat。

6个回答

尝试选项

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>

尝试使用正则表达式时的第一条规则——继续搜索 Stack Overflow，直到你看到不需要正则表达式的解决方案——干杯 :)
2021-03-14 08:13:58
在没有大写字母的情况下写 onchange 更干净
2021-03-24 08:13:58
multipleHTML 选择标签场景在哪里？
2021-03-25 08:13:58
我想说今天的首选方法是使用selectedOptions. 这也解决了@Nitrodist 的问题。
2021-04-08 08:13:58

纯 JavaScript

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

jQuery：

$("#box1 option:selected").text();
@mplungjan 不是innerHTML，innerText甚至更糟。
2021-03-17 08:13:58
我看到选项：{ get: function( elem ) { var val = elem.attributes.value; 返回 !val || val.specified ? elem.value : elem.text;} 在 1.9
2021-03-27 08:13:58
@mplungjan你为什么不评论在这里jQuery的用途.textContent和.innerText对.text()操作方法？这不是标准，这是完全错误的，因为它不使用.text. 反对票在哪里？
2021-03-30 08:13:58

所有这些功能和随机的东西，我认为最好使用这个，并且这样做：

this.options[this.selectedIndex].text

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

两者都只需要使用 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>

HTML：

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

JavaScript：

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

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

看到这条评论我删除了我们的对话，因为你修复了你的代码
2021-04-07 08:13:58
其它你可能感兴趣的问题
上一篇记住并重新填充文件输入 下一篇如何使用 window.fetch 下载文件？