Jquery：根据 <select> 属性设置 <option> 检查

Posted 2023-05-09

【中文标题】Jquery：根据 <select> 属性设置 <option> 检查

【英文标题】：Jquery: set <option> checked based on <select> attribute

【发布时间】：2016-03-23 20:21:38

【问题描述】：

我正在尝试编写一个简单的 jquery 脚本，该脚本将遍历页面上的 all <select> 元素，并选择一个名为 selected 的属性并根据该属性将选项值设置为 selected。

示例：

<select selected="2">
  <option value="1">One</option>  
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

在上面的示例中，代码会将选项“二”设置为选中。

最简洁的写法是什么？

编辑：

为了澄清，我的问题和上面的例子的主要问题是我使用了保留关键字'selected'。我建议使用另一个属性名称（我将其更改为 data-selected，这甚至对 html5-spec 有效 :-)）。

<select data-selected="2">
  <option value="1">One</option>  
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

【问题讨论】：

到目前为止你尝试了什么？

由于某种原因，我无法让我的版本（使用 .each 迭代）工作，因此我在这里提出了这个问题。

所以，你应该把它贴在这里..

为什么？我没有理由发布不正确的代码示例。

最简洁的方法不是遍历 DOM 中的所有元素，而是针对特定的 select 元素。在最坏的情况下，只抓取select 元素并循环浏览这些元素。

【参考方案1】：

selected 是保留属性。无论您将其设置为什么，jQuery 都会将其值返回为“已选择”。

相反，您可以直接访问 DOM attributes 集合，如下所示：

$('select[selected]').val(function() 
  return this.attributes.selected.value;
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select selected="1">
  <option value="1">One</option>  
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select selected="2">
  <option value="1">One</option>  
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select selected="3">
  <option value="1">One</option>  
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

【讨论】：

谢谢，这是正确答案。在我将属性重命名为 selected_value 后，我的代码也可以正常工作，并且上面的代码适用于我错误使用的关键字属性。

【参考方案2】：

options 具有selected 属性。你不能在 select 这样的元素上拥有 selected 属性。您可以使用数据属性或名称。

$('select[data-selected="1"]')

或

$('select[name="1"]')

要获得值为 1 的选项，您只需向其添加选定属性即可：

$('select[data-selected="1"] option[value="1"]').attr('selected', 'selected');

DEMO

【讨论】：

谢谢，根据 html5 规范命名额外属性是个好主意。

【参考方案3】：

正如其他答案中提到的，selected 是保留关键字。

调整了您的 html，现在可以正常工作了：

<select mysv="2">
  <option value="1">One</option>  
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

$("select").each(function()
    var sv = $(this).attr("mysv");
  $(this).find("option[value="+sv+"]").attr("selected", "selected");
);

【参考方案4】：

这是我最终结束的代码。它具有其他解决方案所没有的一项额外功能，即检查属性可用性。如果缺少属性，其他解决方案会将选择字段设置为空白（即使没有可用的空白选项）。

$("select").each(function() 
   var selected_val = $(this).attr("data-selected");
   if(selected_val)
      $(this).val(selected_val);
);