Javascript querySelector for select element

select.selectedOptions[0] returns the actual option element itself, so you can get and set innerHTML from that directly.

Also make sure you set a selected on an option so that something is selected by default and select.selectedOptions is never empty.

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>

You mean this?

You do not need the .option after selectedOptions[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>

Just remove the option before innerHTML. Follow the code.

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

strong text

Working Demo

You can find the selected option using a css selector and read its textContent

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

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

There is a one-liner using the :checked pseudo-class in JavaScript to get either the selected text or value. Here we are assuming we have a select with id="searchList".

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

Verifying that this indeed works for selected options in select elements, here's the official documentation:

The :checked CSS pseudo-class selector represents any radio (), checkbox (), or option ( in a ) element that is checked or toggled to an on state.

:checked MDN

• javascript
• html