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