如何从我的 jquery 函数中获取 table 行中所选选项的值

Question

我在数据 table 中使用 select 选项，我想从 table 的行中获取 selected 选项的值，当我想在 table 的每一行中获取 selected 选项，因为 select “id” 是一个所以它每次都带来相同的值（第一个 selected 值)，但 selected 选项值在每一行中都会发生变化。

HTML CODE:
  <div class="card-body">
            <table id="customerTable" class="data-table-customer table table-hover">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Surname</th>
                        <th>Tel</th>
                        <th>Agent</th>

                    </tr>
                </thead>
                <tbody>


                    @foreach (var customer in Model.customerLoadList)
                    {
                    <tr id="customerRow">
                        <td>@customer.Name</td>
                        <td>@customer.Surname</td>
                        <td>@customer.PhoneNumber</td>
                       
                       <td class="agentList">
                       <div class="form-group">
  // id="agentList" this id is same for all values, how i change it to dynamic id
                        <select id="agentList" name="agentList" class="agentSelect form-control">
                         @foreach (var agent in Model.agentList)
                         {
                          <option value="@agent.AgentId">@agent.AgentNameSurname</option>
                          }
                        </select>
                        </div>
                       </td>
                      
                </tr>}

            </table>
        </div>

JQUERY 代码

function SaveCustomer() {
    var customerListForAdd = new Array();
    var table = document.getElementById("customerTable");
    var tableLenght = table.rows.length;
    for (var i = 0; i < tableLenght - 1; i++) {
       
        var customerObj = {
            Name: ($('.data-table-customer').DataTable().cell(i, 0).data()).toString(),
            Surname: ($('.data-table-customer').DataTable().cell(i, 1).data()).toString(),
            PhoneNumber: ($('.data-table-customer').DataTable().cell(i, 2).data()).toString(),
// i get value from this code but all of the value are same i wanna make it dynamic
            Agent: $('select[name=agentList]').filter(':selected').val() 
            
        };
        customerListForAdd.push(customerObj);
    }

    $.ajax({
        type: 'POST',
        url: '/Stock/SaveCustomerList',
        data: { "customerListForAdd": customerListForAdd }, 
        ContentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function (r) {
            alert(r + " record(s) inserted.");
        }
    });

}

Answer 1

每次达到option

的值都需要修改<select>id

前

<div class="card-body">
            <table id="customerTable" class="data-table-customer table table-hover">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Surname</th>
                        <th>Tel</th>
                        <th>Agent</th>

                    </tr>
                </thead>
                <tbody>
                    @*change here*@
                    @{int i = 0;}
                    @foreach (var customer in ViewBag.A)
                    {
                        <tr id="customerRow">
                            <td>@customer.Name</td>
                            <td>@customer.Surname</td>
                            <td>@customer.PhoneNumber</td>
                            <td class="agentList">
                           <div class="form-group">
      
                            <select id="agentList_@i" name="agentListName" class="agentSelect form-control">
                             @foreach (var agent in ViewBag.B)
                             {
                              <option value="@agent.AgentId">@agent.AgentNameSurname</option>
                              }
                            </select>
                            </div>
                           </td>
                </tr>
                i++;
            }
               </tbody>
               
            </table>
            <button onclick="SaveCustomer()">Save</button>
</div>

脚本

<script>
function SaveCustomer() 
        {
       
        var customerListForAdd = new Array();
        var table = document.getElementById("customerTable");
        var tableLenght = table.rows.length;
        var rows = table.rows;
          for (var i = 0; i < tableLenght - 1; i++) {
       
            var customerObj = {
                Name: ($('.data-table-customer').DataTable().cell(i, 0).data()).toString(),
                Surname: ($('.data-table-customer').DataTable().cell(i, 1).data()).toString(),
                PhoneNumber: ($('.data-table-customer').DataTable().cell(i, 2).data()).toString(),
    // i get value from this code but all of the value are same i wanna make it dynamic
                AgentId: $('#agentList_'+i).val() 
            
            };
            customerListForAdd.push(customerObj);
        }



            $.ajax({
                type: 'POST',
                url: '/Home/test2',
                data:  JSON.stringify(customerListForAdd), 
                contentType: 'application/json;charset=utf-8',             
                success: function (data) {
                    alert(data);
                }
            });
    </script>

然后，你可以从Jquery函数中获取值

如何从我的 jquery 函数中获取 table 行中所选选项的值

How to get value of selected option in a table row from my jquery function

html

ajax

jquery

asp.net-core-mvc