jQuery - Get Select Option by it's Text (then amend it)

Question

I have been using the following code to add some extra text onto a dropdown option:

jQuery("[id='product option1'] > option:contains('Notebook')").text('Notebook - OUT OF STOCK');

I have to get the option by it's Text as 1000's of my products use this same dropdown and they each have their own different value. It is just the text that is the same for all.

This works but also in my dropdown list is Notebook Large so using the above adds - OUT OF STOCK to any options with the words Notebook.

I know this is because I am looking for contains. What can I use to find the option with the exact text only?

note: I know it is not best practice but I cannot change the id to not have spaces hence the need for [id='product option1'] as the selector.

leave your data sample would help too much. And please mention your jquery version some version has some bugs. — MSS, Sep 15 '16 at 15:44
Possible duplicate of [jquery : How to select an option by its text?](http://stackoverflow.com/questions/3744289/jquery-how-to-select-an-option-by-its-text) — Jamie Barker, Sep 15 '16 at 15:45

score 0 · Answer 1 · answered Sep 15 '16 at 15:52

0

Try this:

jQuery("[id='product option1']")
.children()
.filter(function(i,v){return v.innerText.indexOf('Notebook')>-1;})
.text('Notebook - OUT OF STOCK');

answered Sep 15 '16 at 15:52

MSS

3,520
24
29

`.indexOf()` is like `:contains()` and doesn't solve the problem. – Mohammad Sep 15 '16 at 15:57
please provide a fiddle sample or snap-it to test it live. – MSS Sep 15 '16 at 16:13

peterpeterson · Answer 2 · 2016-09-15T15:58:42.680

0

I usually used filter, which takes a function as a parameter and if is true it is added to the stack, otherwise it is skipped, so in this case it should look something like:

jQuery("*[id='product option1']")
    .find('option')
    .filter(function (){
          return $.trim($(this).text())=='Notebook';
    })
    .text('Notebook - OUT OF STOCK');

edited Sep 15 '16 at 15:58

answered Sep 15 '16 at 15:53

peterpeterson

1,315
2
14
38

`.indexOf()` is like `:contains()` and doesn't solve the problem. – Mohammad Sep 15 '16 at 15:56

score 0 · Accepted Answer · edited May 23 '17 at 12:33

None of the answers worked for me as they still gave me all options which contained that text. The link given to me by @Jamie Barker:

jquery : How to select an option by its text?

Gave me the correct result (thanks to Dr. C. Hilarius)

Code is:

jQuery("[id='product option1'] > option:contains('Notebook')").each(function(){
    if (jQuery(this).text() == 'Notebook') {
        jQuery(this).text('Notebook - OUT OF STOCK');
        return;
    }
});

jQuery - Get Select Option by it's Text (then amend it)

3 Answers3