selecting option in dynamcially generated select boxes when id is unknown

I am generating a html select boxes dynamically. The select boxes have a name:value pair of the number of total select boxes. That said, if I have 4 select boxes, then in each of the select box should have options like:

<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>

. That I've accomplished already. Now I want option 1 to be selected for the first select box, option 2 to be selected for the second select box and so on. (I am a complete noob and maintainig someone's code. So the code is pretty ugly but if you guys should need it...I will post it.)

EDIT At the moment, abdulla's suggestion is working a bit but not fully. It always selects the first item only. Guys, this is a horrible code, but I think only it can help you understand mistakes I'm making:

 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);
             });
        })开发者_JAVA百科;

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


                    }

                );
                });

Only the select boxes in the 5th column are in consideration.

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

You could generate the select boxes with the option that you wanted having the attribute:

selected="true"

This also works, by setting the selected="selected" property on the children..

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

if i have understood correctly, i assume you have the following markup

<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>

you can try

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

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

});

here is the fiddle http://jsfiddle.net/skyWJ/

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