我想用js选择选项？

Question

我想用 js 选择 get 选项，但我的代码返回“未定义”。 哪里出错了？

const aaa = document.querySelector("#test")

const rng = aaa.addEventListener("change",(e)=>{
  return e.target.selectedOptions[e.target.selectedIndex].text
})
console.log(rng)

<select id="test">
      <option value="a">a</option>
      <option value="b">b</option>
      <option value="c">c</option>
</select>

Answer 1

首先，您将 addEventListener 分配给您的 const

rng

，并且它返回

undefined

这就是为什么您未定义，回调函数不会返回到此上下文

第二，

selectedOptions

这里，对于单个选择输入，将只有一个表示为对象的项目，您可以通过键

0

获取元素本身，您不应该尝试通过中的真实索引来访问它选项列表

最后获取这个元素的innerText

例如：

const selectElement = document.querySelector("#test")

selectElement.addEventListener("change",(e)=>{
  console.log(e.target.selectedOptions[0].innerText)
})

<select id="test">
      <option value="a">a</option>
      <option value="b">b</option>
      <option value="c">c</option>
</select>

或者您可以使用

querySelector

:

获取元素

const selectElement = document.querySelector("#test")

selectElement.addEventListener("change",(e)=>{
  console.log(selectElement.querySelector("option:checked").innerText)
})

<select id="test">
      <option value="a">a</option>
      <option value="b">b</option>
      <option value="c">c</option>
</select>