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.selectedOptionsconst select = document.querySelector("#myDiv select");&nbsp;console.log("Initial:", select.selectedOptions[0].innerHTML);const button = document.getElementById('toggle'),&nbsp; &nbsp; &nbsp; newText = document.getElementById('newText');&nbsp; &nbsp; &nbsp;&nbsp;button.addEventListener('click', () => select.selectedOptions[0].innerHTML = newText.value);<div id="myDiv">&nbsp; <select id="mySelect">&nbsp; &nbsp; <option value="option_a" selected>Option A</option>&nbsp; &nbsp; <option value="option_b">Option B</option>&nbsp; </select><br>&nbsp; <input id="newText" type="text" placeholder="Enter text here..."></input>&nbsp; <button id="toggle">Change</button></div>

Answer 2

您可以使用css选择器找到所选选项并阅读其textContentconsole.log(document.querySelector("#myDiv select option:checked").textContent);<div id="myDiv">&nbsp; <select>&nbsp; &nbsp; <option value="1">one</option>&nbsp; </select></div>

Answer 3

只需删除前面的内部HTML。按照代码操作。optionconst select = document.querySelector("#myDiv select");&nbsp;const optionSelected = select.selectedOptions[0];&nbsp;console.log(optionSelected);&nbsp;optionSelected.innerHTML = 'New Demo'强文本工作演示

Answer 4

你是说这个？选择后不需要.选项[0]const select = document.querySelector("#myDiv select");&nbsp;console.log(select.selectedOptions[0].textContent); // or .text// alternativeconsole.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 nodeconsole.log(selected.innerText);//get the selected option textconsole.log(selected.value);//get the selected option value验证这确实适用于选定元素中的选定选项，以下是官方文档：：checked CSS 伪类选择器表示选中或切换到 on 状态的任何单选按钮 （）、复选框 （） 或选项 （ 元素。