使用类从下拉列表中选择一个选项？答案

【问题标题】：Select an option from a drop down using the class?使用类从下拉列表中选择一个选项？
【发布时间】：2017-12-03 21:51:42
【问题描述】：

我正在寻找一种使用项目类从下拉列表中选择选项并包含文本的方法。例如

<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>

我不能使用选择 ID，因为它可能会改变，但类将始终相同。我想做，如果选项有测试这个词，把“测试”这个词的颜色变成蓝色。

我认为我可以处理颜色分配，但我遇到的问题是使用类来选择子选项。我试过了：

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

但是我得到一个错误，这不是一个有效的选择器。

我也试过了：

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

最后感谢cmets，我尝试了

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

但是，这只会返回第一项。

好的，这是生产中的实际代码，让我们看看这是否改变了什么。

<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>

这是一个将每个元素作为文本返回的小提琴，但不知何故不返回元素。

https://jsfiddle.net/3hgpw778/

【问题讨论】：

您显示的第一个选择器是有效的选择器 - 您确定错误发生在该行吗？话虽如此，我认为您无法更改选项元素中单个单词的颜色。
两个选择器都有效，只有第一个对您的 DOM 有效 - 第二个在类 mySelect 的元素中查找选择元素 - 因此，将始终返回 0 个元素
@JaromandaX 与当前 html 标记第二个无效，因为 select 具有该类。如果他输入select.mySelect 将是有效的
@guradio 它根本不是 invalid，它只是不会选择任何元素
@nnnnnn 我所说的无效是指它不会返回任何内容，因为选择器错误而不是无效意味着错误。我猜只是错误的词

标签： javascript jquery css

【解决方案1】：

$('.mySelect option:contains("Test")'); 有效并且正在选择三个选项。但作为替代方案，你可以试试这个：

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

【讨论】：

您的替代方案是无效的 JS 语法（鉴于 OP 的代码应该按原样工作，因此不必要）。
$('select option[value^="Meeting"]') 不起作用，但是 $('select option[value*="Meeting"]') 只带来了第一项。
为什么是 Meeting，所有选项的值都以 Test 开头。
我的意思是测试，我的实际代码使用了会议这个词 $('select option[value*="Test"]')
jsfiddle 在警告框中显示所有选项。这不正确吗？

【解决方案2】：

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

就是答案。我从Simple jQuery selector only selects first element in Chrome..?得到了额外的一块

【讨论】：

啊。所以你实际上并没有使用 jQuery 库？您链接到的问题是关于使用$() 和$$() 在控制台中，只有当您的页面中没有正确包含jQuery 时，它才会有所作为。
是的。我没有怀疑任何事情，因为我仍然能够做到 $("*");
另外，JSFiddle 我想以某种方式弥补了这一点。
人们一直链接到的小提琴，包括您添加到问题中的那个，都在 JavaScript 设置对话框的“框架和扩展”下拉列表下明确包含了 jQuery。
在屏幕右上角的 Javascript 部分显示“Javascript”和一个小齿轮图标，点击打开 JS 设置对话框。