當id未知時，在動態生成的選擇框中選擇選項

Question

我正在動態生成html選擇框。選擇框具有總數選擇框的名稱：值對。這就是說，如果我有4個選擇框，那麼在每個選擇框中應該有如下選項：

<select id="dynamic_id" > 
     <option value=1>1</option> 
     <option value=2>2</option> 
     <option value=3>3</option> 
     <option value=4>4</option> 
    </select> 

。我已經完成了。現在我想爲第一個選擇框選擇選項1，爲第二個選擇框選擇選項2等等。 （我是一個完整的小白和maintainig別人的代碼。因此，代碼是非常醜陋的，但如果你們需要它。我將它張貼。）

編輯 目前，阿卜杜拉的建議工作有點但不完全。它始終只選擇第一個項目。夥計們，這是一個可怕的代碼，但我認爲只有它可以幫助你理解我正在犯的錯誤：

var r_count=0; 
$(document).ready(function(){ 
var newId; var tableName; var display_table; 

$(".clickable").each(function(i,l){ 

$(l).click(function(){ 
    var parentId = $(this).parents("div")[0].id; 
    var li = $(this).parents("li")[0]; 
    var liIndex = $(li).parent().find("li").index(li); 
    newId = parentId + "_" + liIndex; 

    if(this.checked) { 
     display_table = $("#display_board"); 
     var newtr = $(".data_table_template").clone(); 
     tableName = $($(this).parents("table")[0]).find("th").text().trim(); 
     var columnName = $(this).parent().text().trim(); 

     newtr.attr("id",newId); 
     newtr.attr("class",""); 
     newtr.show(); 
     newtr.find("td").each(function(i,l){ 

     if(i==0) 
      $(this).html(columnName) 
     else if(i==2) 
      $(this).html(tableName) 
     else if(i==3){ 
      $(this).each(function(i,l){ 
       $(this).find("#checkbox").attr("id", "chkbx_" + newId); 
      }); 
     } 
     else if(i==4){ 
      $(this).each(function(i,l){ 
        //$(this).find("#select").html(); 
        /* Generate new id for the table item dynamically*/ 
        $(this).find("#select").attr("id", "sort_type_" + newId); 
        $(this).find(".sel1").attr("name", "sort_type_" + newId); 
        $(this).find("#checkbox").attr("id", "sort_type_" + newId); 
      }); 
     } 
     else if(i==5) 
      $(this).each(function(m,l){ 
       /* Generate new id for the table item dynamically*/ 
       $(this).find("#select2").attr("id", "sort_order_" + newId); 
       $(this).find(".sel2").attr("name", "sort_order_" + newId); 
      }); 
     }); 

     display_table.append(newtr); 
     r_count++; 

     // addOption is from another jquery plugin    
     $(".sel2").addOption(r_count+1, r_count+1); 

     // as suggested in the answer 
     $('select').each(function (index, item) { 
     $(this).children('option:nth-child(' + (index +1) + ')').attr('selected',  'selected'); 
}); 

} else { 
          r_count--; 
          //$("#" + newId).find("#chkbx_"+newId).attr('checked',''); 
          $("#" + newId).remove(); 
          $(".sel2").addOption(r_count, r_count); 
         } 


        } 

       ); 
       }); 

只有第5列中的選擇框在考慮範圍內。

Answer 1

$('select').each(function(index, value) { 
    this.selectedIndex = index; 
}); 

Answer 2

你可以生成你想要有屬性的選項選擇框：

selected="true" 

Answer 3

這也適用，通過設置對孩子的選擇=「選擇」屬性..

$('select').each(function (index, item) { 
    $(this).children('option:nth-child(' + (index +1) + ')').attr('selected', 'selected'); 
}); 

Answer 4

如果我理解正確的話，我想你有以下標記

<select id="dynamic_id" > 
     <option value=1>1</option> 
     <option value=2>2</option> 
     <option value=3>3</option> 
     <option value=4>4</option> 
</select><br/> 
<select id="dynamic_id2" > 
     <option value=1>1</option> 
     <option value=2>2</option> 
     <option value=3>3</option> 
     <option value=4>4</option> 
</select><br/> 
<select id="dynamic_id3" > 
     <option value=1>1</option> 
     <option value=2>2</option> 
     <option value=3>3</option> 
     <option value=4>4</option> 
</select><br/> 
<select id="dynamic_id4" > 
     <option value=1>1</option> 
     <option value=2>2</option> 
     <option value=3>3</option> 
     <option value=4>4</option> 
    </select> 

你可以嘗試

$("select").each(function(index){ 
    index=index+1; 

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

}); 

這裏是小提琴http://jsfiddle.net/skyWJ/

Answer 5

$('select').each(function(index, value) { 
    $(this).val(index + 1).change(); 
});