Select an option from a drop down using the class?

Question

I am looking for a way to select an option from a drop down list using the item class, and containing text. For example

<select class="mySelect"> 
<option value="Test 1">Test 1</option>
<option value="Test 2">Test 2</option>
<option value="Test 3">Test 3</option>
</select>

I cannot use the select ID because it might change, but the class will always be the same. I want to do, if option has the word Test, make the color of the word "Test" blue.

I think I can handle the color assignment, but what I am having an issue with is using the class to select the child options. I have tried:

$('.mySelect option:contains("Test")');

However I get an error that this is not a valid selector.

I also tried:

$('.mySelect select option:contains("Test")');

Finally, thanks to comments, I tried

$('select option[value*="Test"]')

However, this only returns the first item.

OK, here is the actual code in production, lets see if this changes anything.

<select onclick="SetChoiceOption('ctl00_ctl40_g_6a07f243_6d33_4cb8_bf98_47743415ee4a_ctl00_ctl05_ctl05_ctl00_ctl00_ctl05_ctl00_DropDownButton')" name="ctl00$ctl40$g_6a07f243_6d33_4cb8_bf98_47743415ee4a$ctl00$ctl05$ctl05$ctl00$ctl00$ctl05$ctl00$DropDownChoice" id="ctl00_ctl40_g_6a07f243_6d33_4cb8_bf98_47743415ee4a_ctl00_ctl05_ctl05_ctl00_ctl00_ctl05_ctl00_DropDownChoice" title="Category: Choice Drop Down" class="ms-RadioText">
                            <option selected="selected" value=""></option>
                            <option value="Meeting Test">Meeting Test</option>
                            <option value="Work hours Test">Work hours Test</option>
                            <option value="Business Test">Business Test</option>
                            <option value="Holiday Test">Holiday Test</option>
                            <option value="Get-together Test">Get-together Test</option>
                            <option value="Gifts Test">Gifts Test</option>
                            <option value="Birthday Test">Birthday Test</option>
                            <option value="Anniversary Test">Anniversary Test</option>

                        </select>

Here is a fiddle that returns each as text, but, somehow does not return the elements.

https://jsfiddle.net/3hgpw778/

The first one you show is a valid selector - are you sure the error is happening on that line? Having said that, I don't think you can change the colour of individual words in an option element. — nnnnnn, Jun 30 '17 at 03:05
both selectors are valid, only the first is valid for your DOM - the second looks for a select element inside an element with class mySelect - so, will always return 0 elements — Jaromanda X, Jun 30 '17 at 03:08
@JaromandaX with current html mark up second one is invalid because select has that class. if he put `select.mySelect` would have been valid — guradio, Jun 30 '17 at 03:09
@guradio it's not **invalid** at all, it just wont select any elements — Jaromanda X, Jun 30 '17 at 03:09
@nnnnnn what i mean by invalid is it wont return any because the selector is wrong not invalid meaning wrong. just wrong word i guess — guradio, Jun 30 '17 at 03:10
@guradio - the OP is suggesting that they are getting an error regarding the validity of the selector - neither selector is syntactically invalid - so the **error** is because the OP isn't showing the **actual** selector :p — Jaromanda X, Jun 30 '17 at 03:11
@JaromandaX as i said it is wrong for the current mark. it just wrong choice of word i guess — guradio, Jun 30 '17 at 03:12
Jquery 3.1, $('select option[value*="Test"]') is close, but only returning first item that matches. — 贝壳 - BeiKe, Jun 30 '17 at 03:24
@贝壳-BeiKe `$('.mySelect option:contains("Test")')` works in jquery 3.1, please check https://jsfiddle.net/cshao/v817v9uL/ — shaochuancs, Jun 30 '17 at 03:28
Please [edit] your question to show the related code. In your comment now you're talking about matching something different, and you haven't shown how you're trying to use the result. Any version of jQuery >= 1.1.4 should be fine as far as your original selector goes. — nnnnnn, Jun 30 '17 at 03:28
I am trying to do the exact same thing as I tried to do originally. One of the other posters simplified it but it still didn't work. Nevertheless, updating the question. — 贝壳 - BeiKe, Jun 30 '17 at 03:36
@贝壳-BeiKe which browser are you using? what is its version? — shaochuancs, Jun 30 '17 at 03:41
The alternative that you've added to your question [returns *all* matching elements](https://jsfiddle.net/v817v9uL/1/), not just the first one. If you're only getting one you must be doing something else wrong in code not shown, so, again, please [edit] your question to show that line in context. — nnnnnn, Jun 30 '17 at 03:42
No, I am really not, should have been the exact same behavior, I am also confused. I will edit the code to be exact. — 贝壳 - BeiKe, Jun 30 '17 at 03:44
@nnnnnn https://jsfiddle.net/3hgpw778/ only works in the fiddle, does not allow results.text() in prod as "it is not a function" — 贝壳 - BeiKe, Jun 30 '17 at 04:02
Are you saying your real JS code is only two lines long as in the fiddle? If not, please show all of your real function, or at least the part that tries to do whatever you're doing with the options. What is the full text of the error message? — nnnnnn, Jun 30 '17 at 04:06
@nnnnnn Yes, that is what I am saying, only 2 lines. I didn't write anything else because this part is not functioning correctly. — 贝壳 - BeiKe, Jun 30 '17 at 04:08
So the full error message is...? Regarding what you said in your edit about how the fiddle "returns each as text, but, somehow does not return the elements", I don't understand, because it *does* return the elements: https://jsfiddle.net/3hgpw778/1/ — nnnnnn, Jun 30 '17 at 04:10

Dij · Answer 1 · 2017-06-30T03:11:01.643

1

$('.mySelect option:contains("Test")'); is valid and is selecting the three options. but as an alternative you can try this:

$('select option[value^="Test"]')

edited Jun 30 '17 at 03:11

answered Jun 30 '17 at 03:09

Dij

9,761
4
18
35

Your alternative is invalid JS syntax (and unnecessary given the OP's code should work as is). – nnnnnn Jun 30 '17 at 03:10
$('select option[value^="Meeting"]') did not work, however $('select option[value*="Meeting"]') brought only the first item. – 贝壳 - BeiKe Jun 30 '17 at 03:20
why Meeting, all options have values starting with Test. – Dij Jun 30 '17 at 03:26
I meant Test, my actual code uses the word meeting $('select option[value*="Test"]') – 贝壳 - BeiKe Jun 30 '17 at 03:28
jsfiddle is showing all options in the alert box. Isn't that correct? – Dij Jun 30 '17 at 04:01

score 0 · Answer 2 · answered Jun 30 '17 at 04:12

0

$$('select option[value*="Test"]');

was the answer. I got the additional piece from Simple jQuery selector only selects first element in Chrome..?

answered Jun 30 '17 at 04:12

贝壳 - BeiKe

113
13

Ah. So you weren't actually using the jQuery library? The question you linked to is talking about use of `$()` and `$$()` *in the console*, and it should make a difference only if jQuery wasn't included correctly on your page. – nnnnnn Jun 30 '17 at 04:14
Yes. I didn't suspect anything because I was still able to do $("*"); – 贝壳 - BeiKe Jun 30 '17 at 04:19
Also, JSFiddle I guess compensates somehow for that. – 贝壳 - BeiKe Jun 30 '17 at 04:21
The fiddles people have been linking to, including the one you added to the question, all have jQuery explicitly included under the "Frameworks & Extensions" dropdown in the JavaScript settings dialogue. – nnnnnn Jun 30 '17 at 04:53
Where is that? I expected it to be in External Resources. – 贝壳 - BeiKe Jun 30 '17 at 05:00
1

In the top right of the Javascript quarter of the screen where it says "Javascript" with a little cogwheel icon, clicking that opens the JS settings dialogue. – nnnnnn Jun 30 '17 at 11:19

Select an option from a drop down using the class?

2 Answers2