Javascript 更新其中一个datatable单元格的多个下拉列表值的最佳方法是什么？

我有一个数据表或类似的表：

<form>
    <table>
       <tr>
         <th>id</th>
         <th>status</th>
         <th>name</th>
      </tr>
      <tr>
         <td>1</td>
         <td><select class="status">
             <option value="100">OPEN</option>
             <option value="100">CLOSE</option>
             <option value="100">PENDING</option>
         </select></td>
         <td>JOHN</td>
      </tr>
        <tr>
         <td>2</td>
         <td><select class="status">
             <option value="101">OPEN</option>
             <option value="101">CLOSE</option>
             <option value="101">PENDING</option>
         </select></td>
         <td>JACK</td>
      </tr>
   </table>
   <input type="button" value="Update" id="update"/>
</form>

身份证件
地位
名称
1.
打开
接近
悬而未决的
厕所
2.
打开
接近
悬而未决的
杰克

我正在使用javascript、jquery、spring 4.0.1 MVC框架。在这里，我必须在单击更新按钮时使用两个参数调用updateStatus web服务调用，其中包括选项值和选项文本。所以第一个用户将更改下拉列表中的值，当用户点击更新按钮时，我必须进行ajax调用，并将这些参数发送给控制器。如果我的表中有100行数据，那么我只需要发送在下拉列表中更改的值。你能告诉我做这件事最好的方法是什么吗？先谢谢你

---

一种方法是使用jQuery事件检测任何更改的select字段。每次触发时，您都会存储更改值的索引。然后，当点击更新按钮时，您将遍历存储的索引，检索它们的值，然后将其发送到后端。例如：

var changeArr = [];
$(document).ready(function () {
 $("select").change(function () {
  var index = $(this).parent().siblings("td.idField").html();
  var value = $(this).val();
  changeArr[index] = value;
 });
 $("#update").click(function () {
  console.log(changeArr);
 });
});

小提琴：

---

使用下面的代码作为解决方案

HTML

---

我尝试过这个方法，但问题是：如果用户更改第一个td单元格的下拉值，更改第二行td单元格的值，然后再次决定更改第一个下拉单元格的不同值，那么我们在那里有重复的。只是为了确保：我们必须发送选项值和文本的基本列表。不管文本值是多少，第一个下拉列表的选项值都是100，但我们必须发送的文本值只有一个。编辑我的答案，再次检查小提琴。使用关联数组，它现在将存储索引和选择框的关联值。它将在用户更改框且不添加任何重复项时更新的值。

<form>
    <table>
       <tr>
         <th>id</th>
         <th>status</th>
         <th>name</th>
      </tr>
      <tr>
         <td>1</td>
         <td><select class="status" currentVal="OPEN" newVal="OPEN">
             <option value="100">OPEN</option>
             <option value="100">CLOSE</option>
             <option value="100">PENDING</option>
         </select></td>
         <td>JOHN</td>
      </tr>
        <tr>
         <td>2</td>
         <td><select class="status" currentVal="OPEN" newVal="OPEN">
             <option value="101">OPEN</option>
             <option value="101">CLOSE</option>
             <option value="101">PENDING</option>
         </select></td>
         <td>JACK</td>
      </tr>
   </table>
    <input type="button" value="update" id="btnUpdate" onclick="myFunction()" />
</form>

$(".status").change(function(){
    var newText = $('option:selected', $(this)).text();
    $(this).attr("newVal",newText);
});

$("#btnUpdate").click(function(){
    var changedVal = [];
    var allsels = $(".status");
    allsels.each(function (index, selec) {
        var newtext = $(selec).attr("newVal");
        var oldtext = $(selec).attr("currentVal");
        if(newtext != oldtext)
        {
            changedVal.push(newtext);
        }
    });

    //all the changed data will be in "changedVal" array
    alert('make ajax call here');
});