Javascript 查询选择元素的选择器

Question

我目前正在尝试以编程方式获取，并以编程方式从纯Javascript中的选择元素中设置所选值的inerHTML。这是我的代码：const select = document.querySelector("#myDiv select");  console.log(select.selectedOptions[0].option.innerHTML);如果我编写控制台.log（选择.选中选项），我得到以下内容：这是我想访问和编辑的innerHTML内部选项，但我收到错误TypeError: Cannot read property 'option' of undefined我在网上没有找到太多关于这个的信息，因此我在这里问。实现这一目标的最佳方法是什么？谢谢！

Answer 1

select.selectedOptions[0]返回实际元素本身，因此您可以直接从中获取和设置。optioninnerHTML

还要确保在选项上设置 了 一个，以便默认情况下选择某些内容并且永远不会为空。selectedselect.selectedOptions

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

console.log("Initial:", select.selectedOptions[0].innerHTML);

const button = document.getElementById('toggle'),

      newText = document.getElementById('newText');

      

button.addEventListener('click', () => select.selectedOptions[0].innerHTML = newText.value);

<div id="myDiv">

  <select id="mySelect">

    <option value="option_a" selected>Option A</option>

    <option value="option_b">Option B</option>

  </select><br>

  <input id="newText" type="text" placeholder="Enter text here..."></input>

  <button id="toggle">Change</button>

</div>

Answer 2

您可以使用css选择器找到所选选项并阅读其textContent

console.log(document.querySelector("#myDiv select option:checked").textContent);

<div id="myDiv">

  <select>

    <option value="1">one</option>

  </select>

</div>

Answer 3

只需删除前面的内部HTML。按照代码操作。option

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

const optionSelected = select.selectedOptions[0]; 

console.log(optionSelected); 

optionSelected.innerHTML = 'New Demo'

强文本

工作演示

Answer 4

你是说这个？

选择后不需要.选项[0]

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

console.log(select.selectedOptions[0].textContent); // or .text

// alternative

console.log(select.options[select.selectedIndex].textContent);

// setting the text:

select.selectedOptions[0].text = "Number one"

<div id="myDiv">

<select>

<option value="1">one</option>

</select>

</div>

Answer 5

在 JavaScript 中有一个单行代码使用 ：checked 伪类来获取选定的文本或值。在这里，我们假设我们有一个 id=“搜索列表”的选择。

const selected = document.querySelector('#searchList :checked');//returns selected node

console.log(selected.innerText);//get the selected option text

console.log(selected.value);//get the selected option value

验证这确实适用于选定元素中的选定选项，以下是官方文档：

：checked CSS 伪类选择器表示选中或切换到 on 状态的任何单选按钮 （）、复选框 （） 或选项 （ 元素。