Iterating through select boxes in a table jQuery
===

I have add row option in my form where user can add as many row as they want and then submit it all at once through ajax. 

Each row contains select boxes, and bunch of textboxes.

Textboxes are submitted correctly but my form is only submitting the select box value in the very first row for all other rows although values are different.

Having explained my issue correctly (hoepfully), here is the code for html code for select box: 

    <td><span id="xyz"><select id="whatever">
    <option value="one">ONE</option>
     <option value="two">TWO</option>
    <option value="three">THREE</option>
    </select>
    </span></td>

and following is different codes version of code for the jQuery to pick up all the select box values:

    $("#table tbody tr").each(function(){
    
    var select = $(this).find("td:eq(0)").find("select#whatever).val();
    //etc
    }
     
    OR
    
    $("#table tbody tr").each(function(){
    
    var select = $("select#whatever).val();
    //etc
    }
    
    
    OR 
    
    $("#table tbody tr").each(function(){
    
    var select = $(this).find("td:eq(0)").find("select#whatever option:selected").val();
    //etc
    }
    
    OR
    
    $("#table tbody tr").each(function(){
    
    var select = $(this).find("td:eq(0)").find("select#whatever").val();
    //etc
    }
    
    OR
    
    $("#table tbody tr").each(function(){
    
    var select = $(this).find("td:eq(0)").find("select").val();
    //etc
    }
    
    
    OR
    
    $("#table tbody tr").each(function(){
    
    var select = $(this).find("td:eq(0).xyz").find("select#whatever").val();
    //etc
    }
    
    
    OR
    
    
    $("#table tbody tr").each(function(){
    
    var select = $(this).find("td:eq(0).dropdown select#whatever").val();
    //etc
    }
    
    
    $("#table tbody tr").each(function(){
    
    var select = $(this).find("td:eq(0)").find("select#whatever").val();
    //etc
    }
    
    
    OR
    
    
    $("#table tbody tr").each(function(){
    
    var select = $("select#whatever option:selected").val();
    //etc
    }
    
    OR
    
    $("#table tbody tr").each(function(){
    
    var select = $("select option:selected").val();
    //etc
    }

Above all are the various versions of the code if I remember correctly, I have tried already in IE 8 without much success. 



They work fine in other browsers like IE 9 and firefox.

Loop is working fine as I am able to get other input boxes values. 

I have also tried html select boxe without id attribute as well but did not work either. 


I really need somebody's help here. 


Thanks to the genius in advance. 

Mark.
 


