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

Posted 2023-02-22

技术标签:

【中文标题】如何在 jQuery 的 SELECT 元素中选择特定选项？【英文标题】：How do you select a particular option in a SELECT element in jQuery? 【发布时间】：2010-09-23 19:10:51 【问题描述】：

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

This、this 和 this 都是有用的答案。

示例标记

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

【问题讨论】：

$("#my_select").val("the_new_value").change(); ... ...来自so 【参考方案1】：

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

$('.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”上的匹配项可能是不需要的。我发现没有selector 与全文匹配，但filter 有效：

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

EDIT3：请谨慎使用$(e).text()，因为它可能包含换行符，导致比较失败。 This happens when the options are implicitly closed (no </option> tag):

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

如果您只使用e.text，任何额外的空格（如尾随换行符）都将被删除，从而使比较更加可靠。

【讨论】：

:contains 不是很好，因为它会匹配文本片段；如果您的任何选项文本是另一个选项文本的子字符串，则会出现问题。这也有效 $('#id option[value="0"]').attr('selected', 'selected'); @Grastveit 如何更改第一个选项的颜色，如果它有一个类说 myClass，它是否被选中。谢谢 @User 我不明白。也许将其发布在一个新问题中？还是 $('.selDiv .myClass').css('color', 'red')？我想补充一点，你应该绝对使用 prop 而不是 attr。尝试调试应用程序并从 attr 更改为 prop 修复它时，我几乎发疯了。【参考方案2】：

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

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

【讨论】：

请注意，从 jQuery 1.6 开始，这应该使用 prop 而不是 attr。 @GoneCoding 使用.attr 是正确的。 "selected" 是的一个属性 @CarlosLlongo：这无关紧要。 jQuery 建议始终使用prop 而不是attr。这样就不必在 w3.org 上查找每个属性，以查看它是否只是一个属性，或者是通过支持操作实现的。【参考方案3】：

你可以使用val()方法：

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

【讨论】：

这是错误的，因为您将所有 SELECT 元素的值设置为 the_value。 .val 不是选择器/过滤器功能！它是一个属性访问器，并将该字符串设置为值。我试图收回我的赞成票，但在我在测试中意识到这一点后为时已晚。请@AaronLS 和@guilhermeGeek，参考docs（最后一个例子）。它用作选择、复选框和单选按钮的选择器，以及文本输入和文本区域的值设置器。您误读了文档。对于复选框、单选框和列表框，该命令设置这些项目的“选定”属性。最后一个示例显示了传递 val("checkbox 1") 如何使其被选中。在通过 CSS/jquery 选择器获取对象方面，这与“选择器”不同。我测试了你的代码，它不起作用。 +1：不，它不是 JQuery 选择器，但是我想大多数搜索这个问题的人都和我一样，只是想更改当前选择的选项；想出一个实际的选择器只是一种方法。这肯定比我看到的让您遍历所有选项的答案更好。 @theUtherSide：我不会总是达成共识。 select 上的 val() 设置器是通过设置值匹配的子 option 的选定属性来实现的，因此确实可以满足问题的要求（但仅用于值搜索而不是文本搜索).【参考方案4】：

按价值来说，jQuery 1.7 对我有用的是下面的代码，试试这个：

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

【讨论】：

我不确定你是否需要 .change() 方法。 .change() 是必要的。我有一个基于 SELECT 切换缩略图的示例。当我上传自定义主题时，它应该从选项列表中选择“自定义主题”。 .prop() 调用有效，但没有 .change()，我的选择右侧的缩略图永远不会更新。 .change() 是最好的建议。 +1 注意：布尔值prop 生成相同的输出。例如.prop('selected', true) 视情况而定，某些浏览器 - 可能是旧浏览器 - 需要字符串 'selected'。我认为他们中的大多数都支持文本字符串。【参考方案5】：

有很多方法可以做到这一点，但最干净的方法已经在val() 的热门答案和大量争论中丢失了。自 jQuery 1.6 起，一些方法也发生了变化，因此需要更新。

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

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

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

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

$select.val("SEL2");

.val() 的 setter 版本是在 select 标记上实现的，方法是将匹配的 option 的 selected 属性设置为相同的 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() 选择<option>，但val 不匹配（可能会发生取决于值的来源），则选择“无”并且$select.val() 将返回null。

因此，对于所示示例，并且为了稳健起见，您可以使用类似 https://jsfiddle.net/1250Ldqn/ 的内容：

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

注 4 - 精确文本匹配：

如果您想通过精确文本进行匹配，您可以使用 filter with 函数。例如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"]，但您必须记住，与所有其他选项相比，属性选择器相对较慢。

【讨论】：

【参考方案6】：

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

【讨论】：

感谢您的帖子，但这个答案在对话中增加了什么，但未包含在已接受的答案中？如果已经选择了一个选项，那么这将失败，因为下拉菜单不能选择多个项目，除非它是多选。你需要做 .prop('selected',true)【参考方案7】：

完全可以试试下面的方法

对于普通选择选项

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

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

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

【讨论】：

【参考方案8】：

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

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

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

【讨论】：

【参考方案9】：

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

【讨论】：

【参考方案10】：

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

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

【讨论】：

【参考方案11】：

在选择触发的情况下设置选择值：

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

从范围设置选项：

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

此代码使用选择器找出带有条件的选择对象，然后将选择的属性更改为attr()。

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

【讨论】：

【参考方案12】：

当我知道列表的索引时，我会使用它。

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

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

【讨论】：

【参考方案13】：

试试这个

您只需使用选择字段 id 而不是 #id (ie.#select_name)

使用您的选择选项 value

而不是 option value

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

【讨论】：

【参考方案14】：

我会选择：-

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

【讨论】：

【参考方案15】：

/* This will reset your select box with "-- Please Select --"   */ 
    <script>
    $(document).ready(function() 
        $("#gate option[value='']").prop('selected', true);
    );
    </script>

【讨论】：

【参考方案16】：

如果您将属性发送到函数并需要更新选择选项，则选择 Jquery

$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');

【讨论】：

【参考方案17】：

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

$row.find('#component').val('All');

【讨论】：

【参考方案18】：

如果你不想使用 jQuery，你可以使用下面的代码：

document.getElementById("mySelect").selectedIndex = "2";

【讨论】：

【参考方案19】：

感谢您的提问。希望这段代码对你有用。

var val = $("select.opts:visible option:selected ").val();

【讨论】：

【参考方案20】：

$('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");

或

$('#select option[value="myValue"]').prop("selected",true).trigger("change");

【讨论】：

请编辑您的答案，以便将代码格式化为代码。通过使用工具栏或简单地将每个代码块的所有行缩进四个空格来执行此操作。【参考方案21】：

有一些建议为什么你应该使用prop 而不是attr. 一定要使用prop，因为我已经测试过这两种情况，attr 会给你带来奇怪的结果，除了最简单的情况。

我想要一个解决方案，从任意分组的 select 选项中选择会自动选择同一页面上的另一个 select 输入。因此，例如，如果您有 2 个下拉菜单 - 一个用于国家/地区，另一个用于大洲。在这种情况下，选择任何国家会自动在另一个大陆下拉列表中选择该国家的大陆。

$("#country").on("change", function() 
  //get continent
  var originLocationRegion = $(this).find(":selected").data("origin-region");

  //select continent correctly with prop
  $('#continent option[value="' + originLocationRegion + '"]').prop('selected', true);
);



$("#country2").on("change", function() 
  //get continent
  var originLocationRegion = $(this).find(":selected").data("origin-region");

  //select continent wrongly with attr
  $('#continent2 option[value="' + originLocationRegion + '"]').attr('selected', true);
);

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <form>
    <h4 class="text-success">Props to the good stuff ;) </h4>
    <div class="form-row">
      <div class="form-group col-md-6 col-sm-6">
        <label>Conuntries</label>
        <select class="custom-select country" id="country">
          <option disabled selected>Select Country </option>
          <option data-origin-region="Asia" value="Afghanistan">Afghanistan</option>
          <option data-origin-region="Antartica" value="Antartica">Antartica</option>
          <option data-origin-region="Australia" value="Australia">Australia</option>
          <option data-origin-region="Europe" value="Austria">Austria</option>
          <option data-origin-region="Asia" value="Bangladesh">Bangladesh</option>
          <option data-origin-region="South America" value="Brazil">Brazil</option>
          <option data-origin-region="Africa" value="Cameroon">Cameroon</option>
          <option data-origin-region="North America" value="Canada">Canada</option>
          <option data-origin-region="South America" value="Chile">Chile</option>
          <option data-origin-region="Asia" value="China">China</option>
          <option data-origin-region="South America" value="Ecuador">Ecuador</option>
          <option data-origin-region="Australia" value="Fiji">Fiji</option>
          <option data-origin-region="North America" value="Mexico">Mexico</option>
          <option data-origin-region="Australia" value="New Zealand">New Zealand</option>
          <option data-origin-region="Africa" value="Nigeria">Nigeria</option>
          <option data-origin-region="Europe" value="Portugal">Portugal</option>
          <option data-origin-region="Africa" value="Seychelles">Seychelles</option>
          <option data-origin-region="North America" value="United States">United States</option>
          <option data-origin-region="Europe" value="United Kingdom">United Kingdom</option>
        </select>
      </div>
      <div class="form-group col-md-6 col-sm-6">
        <label>Continent</label>
        <select class="custom-select" id="continent">
          <option disabled selected>Select Continent</option>
          <option disabled value="Africa">Africa</option>
          <option disabled value="Antartica">Antartica</option>
          <option disabled value="Asia">Asia</option>
          <option disabled value="Europe">Europe</option>
          <option disabled value="North America">North America</option>
          <option disabled value="Australia">Australia</option>
          <option disabled value="South America">South America</option>
        </select>
      </div>
    </div>
  </form>
  <hr>

  <form>
    <h4 class="text-danger"> Attributing the bad stuff to attr </h4>
    <div class="form-row">
      <div class="form-group col-md-6 col-sm-6">
        <label>Conuntries</label>
        <select class="custom-select country-2" id="country2">
          <option disabled selected>Select Country </option>
          <option data-origin-region="Asia" value="Afghanistan">Afghanistan</option>
          <option data-origin-region="Antartica" value="Antartica">Antartica</option>
          <option data-origin-region="Australia" value="Australia">Australia</option>
          <option data-origin-region="Europe" value="Austria">Austria</option>
          <option data-origin-region="Asia" value="Bangladesh">Bangladesh</option>
          <option data-origin-region="South America" value="Brazil">Brazil</option>
          <option data-origin-region="Africa" value="Cameroon">Cameroon</option>
          <option data-origin-region="North America" value="Canada">Canada</option>
          <option data-origin-region="South America" value="Chile">Chile</option>
          <option data-origin-region="Asia" value="China">China</option>
          <option data-origin-region="South America" value="Ecuador">Ecuador</option>
          <option data-origin-region="Australia" value="Fiji">Fiji</option>
          <option data-origin-region="North America" value="Mexico">Mexico</option>
          <option data-origin-region="Australia" value="New Zealand">New Zealand</option>
          <option data-origin-region="Africa" value="Nigeria">Nigeria</option>
          <option data-origin-region="Europe" value="Portugal">Portugal</option>
          <option data-origin-region="Africa" value="Seychelles">Seychelles</option>
          <option data-origin-region="North America" value="United States">United States</option>
          <option data-origin-region="Europe" value="United Kingdom">United Kingdom</option>
        </select>
      </div>
      <div class="form-group col-md-6 col-sm-6">
        <label>Continent</label>
        <select class="custom-select" id="continent2">
          <option disabled selected>Select Continent</option>
          <option disabled value="Africa">Africa</option>
          <option disabled value="Antartica">Antartica</option>
          <option disabled value="Asia">Asia</option>
          <option disabled value="Europe">Europe</option>
          <option disabled value="North America">North America</option>
          <option disabled value="Australia">Australia</option>
          <option disabled value="South America">South America</option>
        </select>
      </div>
    </div>
  </form>
</div>

从代码 sn-p 中可以看出，prop 每次都可以正常工作，但是一旦选择了一次选项，attr 就无法正确选择。

关键点：我们通常对属性的属性感兴趣，因此在大多数情况下使用prop 比使用attr 更安全。

【讨论】：

以上是关于如何在 jQuery 的 SELECT 元素中选择特定选项？的主要内容，如果未能解决你的问题，请参考以下文章

如何通过 JQuery 选择其中没有 html 的 <select> 元素

select2 jquery插件重置具有预选项目的选择元素

select2下拉菜单的jquery验证弹出位置问题

jquery - select

jquery 操作 select 默认选择第一个元素

jQuery 克隆 <select> 元素