How to get the value from each drop down in a dynamically generated table

Question

I have dynamically added rows to a Table and inside table I have filled up a drop down, but I am not able to get the selected value of drop down list. I tried to loop through table cells but it gives all the values from drop down.

Below is sample code I have written:

<script>
function GetTableValues() {

        var services = new Array();            
        var table =  $(<%=tblService.ClientID%>).find('tbody')[0];
            
        //get the total number of rows
        var len = table.rows.length;
            
            //Loop through Table Rows.
            for (var i = 1; i < table.rows.length; i++) {
                
                //alert(table.rows[i].cells[0].innerHTML);
                var row = table.rows[i];

                //Copy values from Table Cell to JSON object.
                var service = {};
                service.ServiceId = row.cells[0].innerHTML;
                service.ServiceBy = row.cells[1].innerHTML;
                service.Qty = row.cells[2].innerHTML;
                services.push(service);

            }

            //Convert the JSON object to string and assign to Hidden Field.
            document.getElementsByName("hdnService")[0].value = JSON.stringify(services);
            return true;
        }
</script>

Answer 1

Here is an idea about how to get selected value from a table. Let's say you get a table and each row has a column with dropdown list. All these dropdown list are selected with value.

var arr= [];
//find all <td> elements in tbody and loop them
$('#tableID').find('tbody').find('td').each(function(){
//target to the dropdown list elements and get the selected value
var selectedValue = $('option:selected',$(this).find('select')).text(); 
//attach to array 
arr.push(selectedValue);
});