如何在HTML表中获取Dropdownlist值

Question

我有一个html表，如下所示，我希望通过选择下拉列表来获取表格行中的dropdownlist值，当我选择第二行下拉列表时，它总是传递第一行下拉列表值，如何获取选定行的下拉列表值。

我的代码是：

   var table = $('<table id="tblprod" class="datagrid" border="0"  class="table table-bordered"><thead ><tr><th><font size="2">Item ID<font></th><th><font size="2">Material Request Number</th><th><font size="2">Product Name</font></th><th><font size="2">Budget Qty</font></th><th><font size="2"><font size="2">Unit Code</font></font></th><th><font size="2"><font size="2">Unit Price</font></font></th><th><font size="2"><font size="2">Request Quantity</font></font></th><th><font size="2"><font size="2">Available Stock</font></font></th><th><font size="2"><font size="2">AlReady Issued</font></font></th><th><font size="2"><font size="2">Excess/Over Issues</font></font></th><th><font size="2"><font size="2">Balance Quantity</font></font></th><th><font size="2"><font size="2">Current Issue Quantity</font></font></th></tr></thead><tbody id=""></tbody></table>').addClass('product-table');
    $('#product-load-tbl').append(table);
    var totprice = 0;
    $("#select-product").change(function () {
        debugger;
        CallBudgetNo();
        CallBudgetProdQty();
        document.getElementById('select-product').disabled = true;
        var mrqno = $("#select-product :selected").val();
        $.ajax({
            type: "POST",
            url: "/StockTransfer/CallMRN_No?MRNNO=" + mrqno,
            contentType: "application/; charset=utf-8",
            dataType: "json",
            async: false,
            success: function (grnhdmethod) {
                if (grnhdmethod.length > 0) {
                    var i = 0;

                    $.each(grnhdmethod, function (index, item) {
                        debugger;
                        var row = '<tr>';

                        row += '<td class="ProId" id="idPoNum">' + $(this).attr('ItemId') + '</td>';

                        row += '<td class="MRNNo" id="idMrnNum">' + $(this).attr('MaterialRequest_No') + '</td>';


                        row += '<td class="col-md-1 inpprod" dir="rtl">' +
                            '<select id="select-txtpro' + index + '" class="select-Id" style="width: 200px" >"<option>--select Product--</option>"</select></td>';


                        row += '<td class="BudgetQty">' + '<input type="text" class="bdgt-qty' + $(this).attr('ItemId') + ' form-control col-md-3 center-block input-sm" data-id="bdgt-qty-" disabled="true">' + '</td>';

                        row += '<td class="UnitCode">' + $(this).attr('UnitCode') + '</td>';

                        row += '<td class="UnitPrice">' + $(this).attr('UnitPrice') + '</td>';

                        row += '<td class="ordrQty">' + $(this).attr('Quantity') + '</td>';


                        row += '<td class="stockval">' + '<input type="text" class="input-stk' + $(this).attr('ItemId') + ' form-control col-md-3 center-block input-sm" data-id="input-stk-" disabled="true">' + '</td>';

                        row += '<td class="allreadyrecived">' + $(this).attr('finalval') + '</td>';

                        if (TempIssuedtoWorkQty > tempNoBudQty) {

                            row += '<td class="OverIssueQty">' + (TempIssuedtoWorkQty - tempNoBudQty) + '</td>';
                        }
                        else {

                            row += '<td class="OverIssueQty">0</td>';
                        }


                        row += '<td class="blncQty" id="bal" dir="rtl" align="right">' + ($(this).attr('Quantity') - $(this).attr('finalval')) + '</td>';

                        if ($(this).attr('Quantity') == $(this).attr('finalval')) {
                            row += '<td class="col-md-1 inpqty" dir="rtl">' + '<input type="text" class="input-qty form-control col-md-3 center-block input-sm" data-id="input-qty" disabled="true">' + '</td>';
                            alert("Request Order Already Completed..!!!");
                            location.reload();
                            return true;

                        }
                        else {
                        row += '<td class="col-md-1 inpqty" dir="rtl">' + '<input type="text" class="input-qty form-control col-md-3 center-block input-sm" id="input-qty-' + $(this).attr('ItemId') + '" value="0">' + '</td>';
                        }


                        row += '</tr>';

                        table.append(row);

                        $.each(item.Products, function (i,product) {
                            $('#select-txtpro'+index).append(
                                $("<option></option>")
                                .text(product.ProductName)
                                .val(product.ProductId)
                                .attr('ProductId', item.ProductId)
                                .attr('ProductName', item.ProductName)
                            );
                        })
                        CallBudgetProdQty();
                    });
                }
            }

        });

    });

这是我的Onchange功能：

    $('#product-load-tbl').on('change', '.select-Id', function () {
        debugger;
        var proid = $('.select-Id').val();
        var locid = ToIDtemp;
        if (proid == "0") {

            alert("Please Select Product..!");
        }
        else {

            $.ajax({
                type: "POST",
                url: "/StockTransfer/CallAvailablestck?PROID=" + proid + "&LOCID=" + ToIDtemp,
                contentType: "application/; charset=utf-8",
                dataType: "json",
                async: false,
                success: function (prodlist) {
                    if (prodlist.length > 0) {
                        debugger;
                        AvailableStck = prodlist[0].AvaiStock
                        $('.input-stk' + prodlist[0].ItemId).val(AvailableStck)
                    }
                    else {
                        alert('Product Not in Stock')

                    }
                }
            });
        }
    });