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

Answer 2

您可以使用您想要具有属性的选项生成选择框：

selected="true"

Answer 3

这也可以通过在子节点上设置selected =“selected”属性来实现。

$('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();
});

当id未知时，在动态生成的选择框中选择选项

5 个答案: