Get option by value by javascript

Question

I have a selection menu:

<div class="selector">
<select>
<option value="valueA">Value A</option>
<option value="valueB">Value B</option>
<option value="valueC">Value C</option>
</select>
</div>

and I need Javascript (without jquery!) to get the option by value and change its text (innerHtml)

for example, when I run the function, I need to get an option with the value "valueB" from the class "selector" and change the text to the value "Independent".

Answer 1

I would suggest:

document.querySelector('div.selector option[value=valueB]').text = 'Value whatever';

Further, in response to questions raised in the comments:

I need to get only the second element <option>with the same value as the other <option>, and change the text only to the second<option>

To get all items <option>with value="valueB":

document.querySelectorAll('div.selector option[value=valueB]')[1].text = 'Value whatever';

, document.querySelector() ( ) CSS- node ( a NodeList), ; document.querySelectorAll() NodeList, ; ([1]) node / .

Answer 2

document.querySelector('[value=valueB]').innerHtml="innerHtml"

document.querySelector('[value=valueB]').text="text"