如何在 jQuery 的 SELECT 元素中选择特定选项? [英] How do you select a particular option in a SELECT element in jQuery?
问题描述
如果您知道索引、值或文本.如果您没有直接参考的 ID,也可以这样做.
示例标记
<select class="opts"><option selected value="DEFAULT">默认</option><option value="SEL1">选择1</option><option value="SEL2">选择2</option></选择>
按值获取中间选项元素的选择器是
$('.selDiv option[value="SEL1"]')
对于索引:
$('.selDiv option:eq(1)')
对于已知文本:
$('.selDiv option:contains("Selection 1")')
EDIT:正如上面所评论的,OP 可能是在更改下拉列表的选定项目之后.在 1.6 及更高版本中,推荐使用 prop() 方法:
$('.selDiv option:eq(1)').prop('selected', true)
在旧版本中:
$('.selDiv option:eq(1)').attr('selected', 'selected')
EDIT2:在 Ryan 发表评论之后.选择 10"上的匹配可能是不需要的.我发现没有 selector 来匹配全文,但是有一个 filter 工作:
$('.selDiv 选项').filter(function(i, e) { return $(e).text() == "Selection 1"})
EDIT3:使用 $(e).text()
时要小心,因为它可能包含导致比较失败的换行符.This happens when the options are implicitly closed (no </option>
tag):
如果您只是使用 e.text
任何额外的空格,如尾随换行符,都将被删除,使比较更加稳健.
If you know the Index, Value or Text. also if you don't have an ID for a direct reference.
This, this and this are all helpful answers.
Example markup
<div class="selDiv">
<select class="opts">
<option selected value="DEFAULT">Default</option>
<option value="SEL1">Selection 1</option>
<option value="SEL2">Selection 2</option>
</select>
</div>
A selector to get the middle option-element by value is
$('.selDiv option[value="SEL1"]')
For an index:
$('.selDiv option:eq(1)')
For a known text:
$('.selDiv option:contains("Selection 1")')
EDIT: As commented above the OP might have been after changing the selected item of the dropdown. In version 1.6 and higher the prop() method is recommended:
$('.selDiv option:eq(1)').prop('selected', true)
In older versions:
$('.selDiv option:eq(1)').attr('selected', 'selected')
EDIT2: after Ryan's comment. A match on "Selection 10" might be unwanted. I found no selector to match the full text, but a filter works:
$('.selDiv option')
.filter(function(i, e) { return $(e).text() == "Selection 1"})
EDIT3: Use caution with $(e).text()
as it can contain a newline making the comparison fail. This happens when the options are implicitly closed (no </option>
tag):
<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
:
</select>
If you simply use e.text
any extra whitespace like the trailing newline will be removed, making the comparison more robust.
这篇关于如何在 jQuery 的 SELECT 元素中选择特定选项?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!