如何从我的 jquery 函数中获取表行中选定选项的值

Posted 2023-03-31

【中文标题】如何从我的 jquery 函数中获取表行中选定选项的值

【英文标题】：How to get value of selected option in a table row from my jquery function

【发布时间】：2021-12-01 10:40:08

【问题描述】：

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

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>

查询代码

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.");
        
    );

【参考方案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 函数中获取价值

【讨论】：

非常感谢。这似乎正是我所需要的