CODEWITHSUNDEEP
javascripthtml
Jens Olsson
Jens Olsson

Reputation: 65

Javascript querySelector for select element

I'm currently trying to both programmatically get, and programmatically set the innerHTML of the selected value from a select-element in plain Javascript. This is my code:

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

If I write console.log(select.selectedOptions), I get the following:

enter image description here

It's the innerHTML inside option that I want to reach and edit, but I get the error 

TypeError: Cannot read property 'option' of undefined

I did not find much about this online, hence me asking here. What is the best way to achieve this?

Thanks!

Upvotes: 0

Views: 4036

Answers (5)

Charles Owen
Charles Owen

Reputation: 2838

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

Upvotes: 0

KooiInc
KooiInc

Reputation: 122888

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>

Upvotes: 0

sibabrat swain
sibabrat swain

Reputation: 1368

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

Upvotes: 0

Lewis
Lewis

Reputation: 4595

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>

Upvotes: 1

mplungjan
mplungjan

Reputation: 177684

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>

Upvotes: 0

Related Questions