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

Question

我正在尝试编写一个简单的jquery脚本，该脚本将遍历页面上的所有 <select>元素，并选择一个名为selected的属性，并根据该属性将option值设置为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>

Answer 1

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

相反，您可以直接访问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> 

Answer 2

options已selected属性。 这样的select元素上不能具有selected属性。 您可以具有数据属性，也可以具有名称。

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

要么

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

要获得值为1的选项，您可以简单地添加一个选定的属性：

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

DEMO

Answer 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");
});

Answer 4

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

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