如何在jQuery中的SELECT元素中选择特定选项？

如果您知道索引,值或文本.如果您没有直接参考的ID,也可以.

这个,这个和这都是有用的答案.

示例标记

  
    Default
    Selection 1
    Selection 2
  

Grastveit.. 1161

按值获取中间option-element的选择器是

$('.selDiv option[value="SEL1"]')

对于索引:

$('.selDiv option:eq(1)')

对于已知文本:

$('.selDiv option:contains("Selection 1")')

编辑:如上所述,OP可能是在更改下拉列表的选定项目之后.在1.6及更高版本中,建议使用prop()方法:

$('.selDiv option:eq(1)').prop('selected', true)

在旧版本中:

$('.selDiv option:eq(1)').attr('selected', 'selected')

EDIT2:在Ryan的评论之后."选择10"上的匹配可能是不需要的.我找不到匹配全文的选择器,但过滤器有效:

 $('.selDiv option')
    .filter(function(i, e) { return $(e).text() == "Selection 1"})

编辑3:请谨慎使用,$(e).text()因为它可能包含换行符,使比较失败.当隐式关闭选项(无标记)时会发生这种情况:

Selection 1
Selection 2
   :

如果您只是使用e.text任何额外的空格,就会删除尾随换行符,从而使比较更加健壮.

按值获取中间option-element的选择器是

$('.selDiv option[value="SEL1"]')

对于索引:

$('.selDiv option:eq(1)')

对于已知文本:

$('.selDiv option:contains("Selection 1")')

编辑:如上所述,OP可能是在更改下拉列表的选定项目之后.在1.6及更高版本中,建议使用prop()方法:

$('.selDiv option:eq(1)').prop('selected', true)

在旧版本中:

$('.selDiv option:eq(1)').attr('selected', 'selected')

EDIT2:在Ryan的评论之后."选择10"上的匹配可能是不需要的.我找不到匹配全文的选择器,但过滤器有效:

 $('.selDiv option')
    .filter(function(i, e) { return $(e).text() == "Selection 1"})

编辑3:请谨慎使用,$(e).text()因为它可能包含换行符,使比较失败.当隐式关闭选项(无标记)时会发生这种情况:

Selection 1
Selection 2
   :

如果您只是使用e.text任何额外的空格,就会删除尾随换行符,从而使比较更加健壮.

上面没有一种方法提供了我需要的解决方案,所以我想我会提供适合我的方法.

$('#element option[value="no"]').attr("selected", "selected");

你可以使用val()方法:

$('select').val('the_value');

$('#id option[value=theOptionValue]').prop('selected', 'selected').change();

var $select = $('.selDiv .opts');

注1 - 使用val()进行值匹配:

对于值匹配,使用val()比使用属性选择器简单得多:https://jsfiddle.net/yz7tu49b/6/

$select.val("SEL2");

setter版本.val()是select通过设置selected匹配的属性在标签上实现option的value,因此在所有现代浏览器上都可以正常工作.

注2 - 使用prop('selected',true):

如果要直接设置选项的选定状态,可以使用prop(而不是attr)boolean参数(而不是文本值selected):

例如https://jsfiddle.net/yz7tu49b/

$option.prop('selected', true);  // Will add selected="selected" to the tag

注3 - 允许未知值:

如果您使用val()选择a ,但val不匹配(可能会发生取决于值的来源),则选择"nothing"并$select.val()返回null.

因此,对于显示的示例,为了健壮,您可以使用类似这样的内容https://jsfiddle.net/1250Ldqn/:

var $select = $('.selDiv .opts');
$select.val("SEL2");
if ($select.val() == null) {
  $select.val("DEFAULT");
}

注4 - 完全文本匹配:

如果要按精确文本进行匹配,可以使用filterwith函数.例如https://jsfiddle.net/yz7tu49b/2/:

var $select = $('.selDiv .opts');
$select.children().filter(function(){
    return this.text == "Selection 2";
}).prop('selected', true);

虽然如果您可能有额外的空格,您可能需要在支票中添加修剪,如下所示

    return $.trim(this.text) == "some value to match";

注5 - 按索引匹配

如果你想通过索引匹配只是索引选择的孩子,例如https://jsfiddle.net/yz7tu49b/3/

var $select = $('.selDiv .opts');
var index = 2;
$select.children()[index].selected = true;

虽然我现在倾向于避免使用直接的DOM属性来支持jQuery,以及面向未来的代码,所以也可以通过https://jsfiddle.net/yz7tu49b/5/来完成:

var $select = $('.selDiv .opts');
var index = 2;
$select.children().eq(index).prop('selected', true);

注6 - 使用change()来触发新选择

在上述所有情况下,更改事件都不会触发.这是设计使您不会结束递归更改事件.

要生成更改事件,如果需要,只需添加.change()对jQuery select对象的调用.例如,第一个最简单的例子变成https://jsfiddle.net/yz7tu49b/7/

var $select = $('.selDiv .opts');
$select.val("SEL2").change();

还有很多其他方法可以使用属性选择器来查找元素[value="SEL2"],但是您必须记住,与所有其他选项相比,属性选择器相对较慢.

你可以命名选择并使用它:

$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);

它应该选择你想要的选项.

   $(elem).find('option[value="' + value + '"]').attr("selected", "selected");

回答我自己的问题以获取文档.我确信还有其他方法可以实现这一点,但这样可行,并且此代码已经过测试.

Update

        
            Default
            Selection 1
            Selection 2
        
    

使用jquery-2.1.4,我发现以下答案适合我:

$('#MySelectionBox').val(123).change();

如果您有字符串值,请尝试以下操作:

$('#MySelectionBox').val("extra thing").change();

其他例子对我不起作用,这就是我添加这个答案的原因.

我在以下网址找到了原始答案:https: //forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu

用于设置选择触发的选择值:

$('select.opts').val('SEL1').change();

要从范围设置选项:

$('.selDiv option[value="SEL1"]')
    .attr('selected', 'selected')
    .change();

此代码使用选择器查找具有条件的选择对象,然后通过更改所选属性attr().

此外,我建议change()在设置属性后添加事件selected,这样代码将接近用户更改选择.

对于普通选择选项

对于选择2选项，触发选项需要使用

当我知道列表的索引时,我使用它.

$("#yourlist :nth(1)").prop("selected","selected").change();

这允许列表更改,并触发更改事件.":nth(n)"从索引0开始计数

我会选择: -

$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });

您只需使用选择字段ID而不是#id（即#select_name）

代替选项值，请使用选择选项值