用于选择元素的JavaScript querySelector

Question

我目前正在尝试以编程方式获取和以编程方式从纯Javascript中的select元素设置所选值的innerHTML。这是我的代码：

const select = document.querySelector("#myDiv select"); 
console.log(select.selectedOptions[0].option.innerHTML);

如果我编写console.log（select.selectedOptions），则会得到以下信息：

这是我要访问并编辑的innerHTML inside选项，但出现错误

TypeError: Cannot read property 'option' of undefined

我在网上找不到太多有关此内容的信息，因此我在这里问。实现此目标的最佳方法是什么？

谢谢！

Answer 1

你是这个意思吗？

selectedOptions [0]之后不需要.option

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 2

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

还要确保在选项上设置了selected，以便默认情况下已选中某项并且select.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 3

只需删除innerHTML之前的option。遵循代码。

const select = document.querySelector("#myDiv select"); 
const optionSelected = select.selectedOptions[0]; 
console.log(optionSelected); 
optionSelected.innerHTML = 'New Demo'

强文本

Working Demo

Answer 4

您可以使用CSS选择器找到选定的选项，并阅读其textContent

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

<div id="myDiv">
  <select>
    <option value="1">one</option>
  </select>
</div>