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

716

如果您知道索引，值或文本。另外，如果您没有直接参考的ID。

这，这和这都是有用的答案。

标记示例

<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>
jquery 
— 杰伊·科贝特（Jay Corbett）
source
46
$("#my_select").val("the_new_value").change();......从这样
— dsdsdsdsd

Answers:

1204

通过值获取中间选项元素的选择器是

$('.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"})

EDIT3：请谨慎使用，$(e).text()因为它可能包含换行符，导致比较失败。当选项被隐式关闭（没有</option>标签）时，会发生这种情况：

<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
   :
</select>

如果您仅使用e.text任何多余的空格，例如尾随的换行符将被删除，则使比较更加可靠。

— Grastveit
source
8
：contains不是很好，因为它将匹配文本片段；如果您的任何选项文本是另一个选项文本的子字符串，都会有问题。
— 瑞安
26
这是工程太$（ '＃id选项[值= “0”]'）ATTR（ '选择'， '选择'）。
— DevC
@Grastveit当类为myClass的类时，如何更改第一个选项的颜色（如果已选择）。谢谢
— Zaker 2015年
@用户我不明白。也许将其发布在新问题中？还是$（'。selDiv .myClass'）。css（'color'，'red'）？
— Grastveit，2015年
6
我想补充一点，您应该绝对使用prop而不是attr。我差点疯了，尝试调试应用程序，并从attr更改为prop对其进行修复。
— user609926
125

上面的方法都没有提供我需要的解决方案，所以我认为我会提供对我有用的方法。

$('#element option[value="no"]').attr("selected", "selected");
— 用户名
source
10
请注意，从jQuery 1.6开始，应该使用prop而不应该使用attr。
— Gone Coding
@GoneCoding使用.attr是正确的。“ selected”是<option> w3.org/TR/html5/forms.html#attr-option-selected
— Carlos Llongo
3
@CarlosLlongo：没关系。jQuery建议始终prop优先使用attr。这省去了在w3.org上查找每个属性的麻烦，以查看它是否只是一个属性，或者是通过后备操作实现的。
— Gone Coding
81

您可以只使用val()方法：

$('select').val('the_value');
— 莱安德罗·阿迪松（Leandro Ardissone）
source
20
这是错误的，因为您正在将ALL SELECT元素的值设置为the_value。.val不是选择器/过滤器功能！这是一个属性访问器，将字符串设置值传递给它。我试图收回我的支持，但是在测试中意识到这一点已经为时已晚。
— AaronLS
4
热门，您有10票是有用的答案吗？val（）是一个getter和setter方法。如果仅使用val（），则将获得该值。如果你通过像VAL（“the_value”）你将其设置为“the_value”
— 桂
11
请@AaronLS和@guilhermeGeek，参考文档（最后一个示例）。它用作选择，复选框和单选按钮的选择器，以及用作文本输入和文本区域的值设置器。
— Leandro Ardissone
9
您误读了文档。对于复选框，单选框和列表框，该命令为这些项目设置“选定”属性。最后一个示例显示了传递val（“ checkbox 1”）如何使其成为选中状态。就通过CSS / jquery选择器获取对象而言，这与“选择器”不同。我测试了您的代码，它没有底线。
— AaronLS
26
+1：不，它不是JQuery选择器，但是我认为大多数搜索此问题的人都和我一样，只是想更改当前选择的选项；提出一个实际的选择器仅仅是一种方法。这肯定比我见过的答案要遍历所有选项的答案要好。
— kdgregory 2012年
57

按值计算，jQuery 1.7对我有用的是以下代码，请尝试以下操作：

$('#id option[value=theOptionValue]').prop('selected', 'selected').change();
— 姆波莱托
source
5
我不确定您是否需要.change（）方法。
— 菲利普·森
6
的.change()必要。我有一个示例，其中我基于SELECT切换了缩略图。当我上传自定义主题时，应该从选项列表中选择“自定义主题”。该.prop()电话的工作，但没有.change()，我选择右侧的缩略图永远不会更新。
— Volomike 2014年
2
.change（）是最好的建议。+1
— Ja8zyjits
1
注意：布尔prop值会生成相同的输出。例如.prop('selected', true)
— Gone Coding
取决于某些浏览器（也许是旧的浏览器）是否需要字符串“ selected”。我认为其中大多数人支持文本字符串。
— mpoletto
16

有许多方法可以做到这一点，但是最干净的方法已经失去了最重要的答案和之上的论点val()。从jQuery 1.6开始，一些方法也发生了变化，因此需要更新。

对于以下示例，我将假定变量$select是指向所需<select>标签的jQuery对象，例如通过以下方式：

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

注意1-使用val（）进行值匹配：

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

$select.val("SEL2");

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

注2-使用prop（'selected'，true）：

如果您想直接设置选项的选定状态，则可以将prop（not attr）与boolean参数（而不是text值selected）一起使用：

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

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

注3-允许未知值：

如果使用val()来选择<option>，但val不匹配（可能会根据值的来源而发生），则“无”将被选择并$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事件不会触发。这是设计使然，因此您不会遇到递归更改事件。

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

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

还有许多其他使用属性选择器来查找元素的方法，例如[value="SEL2"]，但是您必须记住，与所有其他选项相比，属性选择器相对较慢。

— 去编码
source
13

您可以命名选择并使用它：

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

它应该选择所需的选项。

— 桑德罗
source
12 
   $(elem).find('option[value="' + value + '"]').attr("selected", "selected");
— 若昂·保罗·奥利维拉（JoãoPaulo Oliveira）
source
感谢您的帖子，但是此答案对未包含在已接受答案中的对话有什么帮助？
— 爱德华
如果已经选择了一个选项，则此操作将失败，因为下拉菜单不能选择多个项目，除非它是多选项目。您需要执行.prop（'selected'，true）
— derekcohen 2015年
9

回答我自己的文档问题。我敢肯定还有其他方法可以做到这一点，但这可以正常工作，并且此代码已经过测试。

<html>
<head>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">

$(function() {
    $(".update").bind("click",      // bind the click event to a div
        function() {
            var selectOption = $('.selDiv').children('.opts') ;
            var _this = $(this).next().children(".opts") ;

            $(selectOption).find("option[index='0']").attr("selected","selected");
//          $(selectOption).find("option[value='DEFAULT']").attr("selected","selected");
//          $(selectOption).find("option[text='Default']").attr("selected","selected");


//          $(_this).find("option[value='DEFAULT']").attr("selected","selected");
//          $(_this).find("option[text='Default']").attr("selected","selected");
//          $(_this).find("option[index='0']").attr("selected","selected");

    }); // END Bind
}); // End eventlistener

</script>
</head>
<body>
<div class="update" style="height:50px; color:blue; cursor:pointer;">Update</div>
<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>
</body>
</html>
— 杰伊·科贝特（Jay Corbett）
source
9

确实可以尝试以下方法

对于普通选择选项

<script>    
    $(document).ready(function() {
    $("#id").val('select value here');
       });
        </script>

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

<script>    
        $(document).ready(function() {
        $("#id").val('select value here').trigger('change');
           });
            </script>
— 氮
source
8

在设置触发选择时设置选择值： 

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

从范围设置选项：

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

该代码使用选择器找出具有条件的选择对象，然后通过更改选择的属性attr()。

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

— 蔡力强
source
6

当我知道列表的索引时，就可以使用它。

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

这允许列表更改，并触发更改事件。“：nth（n）”从索引0开始计数

— 米格尔
source
5

我会去：-

$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });
— 用户名
source
5

尝试这个

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

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

 <script>
    $(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
   });
    </script>
— 氮
source
3

对于选择的Jquery，如果您将属性发送给function并且需要update-select选项

$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');
— 安德烈·加斯帕（Andrej Gaspar）
source
1

该$('select').val('the_value');看起来正确的解决方案，如果您有数据表中的行，那么：

$row.find('#component').val('All');
— Jitesh Sojitra
source
1

如果您不想使用jQuery，则可以使用以下代码：

document.getElementById("mySelect").selectedIndex = "2";
— 闪烁
source
0 
$('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");

要么

$('#select option[value="myValue"]').prop("selected",true).trigger("change");
— 托尼·杜兰
source
请编辑您的答案，以便将代码格式化为代码。通过使用工具栏，或通过将每个代码块的所有行缩进四个空格来执行此操作。
— beruic
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.