How to rewrite text of an option in Javascript?

Question

I've encountered one issue: I don't know how to rewrite the (inner)text of an option in a select.

My goal would be something like that:

<select id="example-dropdown">
     <option id="option-id" value="example-option">Example</option>
</select>

<button id="change-option-text-btn" onclick="document.querySelector('#option-id').innerText = 'Example 2'">Click Me</button>

I know this is a possible duplicate, but all of the answers I found are not working for me (I also found some jQuery ones, I don't know if they don't work neither), such as:

document.querySelector("#example-dropdown").options[0].text = "Example 2"

Didn't encounter any error messages.

Edit: Ok, I'm sorry, I didn't say it: this is just an example code, the onclick is there just for saving time

That's because in plain JS, it's `textContent = ...`, not `.text = ...`, and in jQuery it's `.text("...")`, also not `.text = ...`. Having said that, you probably also want to stop using that legacy `onclick` handler and instead do things properly by having your .js in a file, loaded using a ` — Mike 'Pomax' Kamermans, Oct 23 '20 at 16:10
@Mike'Pomax'Kamermans Thanks so much! For the onlick, I don't use it in my original code, it's just for making the example code smaller. In the original code, I have it in an external file with classic addEventListener() method. Gonna try your solution. — PythonisFine, Oct 23 '20 at 16:26
@Mike'Pomax'Kamermans Actually, [the `option` element has a `text` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOptionElement) that sets the text of the option, in addition to the `textContent` property... which does the same thing. — Heretic Monkey, Oct 23 '20 at 16:27
Actually, I tried to change the option's text by selecting it by id and innerText, but it didn't work. I wrote it wrong in the question. Gonna edit it — PythonisFine, Oct 23 '20 at 16:29
@PythonisFine not quite. [The `.text` property does not do the same thing as `textContent`](https://html.spec.whatwg.org/multipage/form-elements.html#htmloptionelement), and is typically best avoided because of that silent rewrite. Sticking to the same attribute that every other HTML element uses is a good habit. — Mike 'Pomax' Kamermans, Oct 23 '20 at 18:36

SMAKSS · Accepted Answer · 2020-10-23T20:03:44.633

Well, there are a couple of issues with your current code and I will point them out briefly here.

First of all, it is better to stick with unobtrusive solution in your code and handle all of the logic inside a <script> or JS file instead of handling them in the HTML itself. So for this, I just removed the onclick handler from the HTML and moved it in the JS section and tried to access the element and adding event to it by addEventListener approach.
Your first snippet should work as expected if you select the right element in the query selector, so you can change the selector to document.querySelector('#example-dropdown option[value=example-option]'), but due to the innerText drawbacks (Which you can find here) it is better to not use it at all for changing the inner text of elements.
If you do not want to use innerText for its drawbacks, to change the content of the HTML tag you can use the innerHTML or textContent property. Which is in your case since you are only trying to change the text of the option alone you need to use textContent.

Your final code should be something like this:

const btn = document.querySelector('#change-option-text-btn');
const select = document.querySelector('#example-dropdown');

btn.addEventListener('click', function() {
  select.options[0].textContent = 'Example 2'
});

<select id="example-dropdown">
  <option value="example-option">Example</option>
</select>

<button id="change-option-text-btn">Click Me</button>

Also, in your particular case since you are trying to change the inner text of the select option there is one more option for you as you tried earlier is to use text property which works the same as textContent and it is only available for HTMLOptionElements.

^{So, document.querySelector("#example-dropdown").options[0].text should do the work for you.}

And it will be like this:

const btn = document.querySelector('#change-option-text-btn');
const select = document.querySelector('#example-dropdown');

btn.addEventListener('click', function() {
  select.options[0].text = 'Example 2'
});

<select id="example-dropdown">
  <option value="example-option">Example</option>
</select>

<button id="change-option-text-btn">Click Me</button>

Thank you! I know about the html mashup, but in the original code I have it all in an external JS file similar to the code you wrote, I put it all into HTML just because of time saving. — PythonisFine, Oct 23 '20 at 16:35
The use of `.text` in OP's question was just wondering about jquery (yes, it's wrong for jquery). In code for "My goal would be something like" they use `.innerText = 'Example 2'` which would work fine _if_ the right element was selected. You don't "_**need**_" to use `textContent`. Also, there's no sign of OP using `.innerHTML` in the whole edit history for the question. — Stephen P, Oct 23 '20 at 18:59
@StephenP As you might know better than me, the `innerText` is not a standard property to use and due to its drawbacks, it is better to avoid using it. So I suggest other available standard approaches. But for the record, I will add these notes to the answer as well. Thank you. — SMAKSS, Oct 23 '20 at 19:49
[`innerText`](https://developer.mozilla.org/docs/Web/API/HTMLElement/innerText) is an [`HTMLElement`](https://developer.mozilla.org/docs/Web/API/HTMLElement) property while [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) is part of the [`Node`](https://developer.mozilla.org/docs/Web/API/Node) interface. They are both standard interfaces at different abstraction levels. Various APIs return either/or so it's good to know both textContent and innerText. — Stephen P, Oct 24 '20 at 00:38

How to rewrite text of an option in Javascript?

1 Answers1