javascript - 当 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，依此类推。 (我是一个十足的菜鸟，维护某人的代码。所以代码非常丑陋，但如果你们需要它......我会发布它。)

编辑 目前，阿卜杜拉的建议有一定效果，但尚未完全发挥作用。它始终仅选择第一项。伙计们，这是一个可怕的代码，但我认为只有它可以帮助您理解我所犯的错误:

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