更新其中一個數據表單元的多個下拉值的最佳方法是什麼？

Question

我有這樣的數據表或表：

<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> 

我使用的JavaScript，jQuery的，春天4.0.1 MVC框架。這裏我必須在包含選項值和選項文本的更新按鈕單擊時使用兩個參數調用updateStatus Web服務調用。所以第一個用戶將更改下拉列表中的值，並且當用戶點擊Update按鈕時，我必須執行ajax調用並且必須將這些參數發送到控制器。如果我的表中有100行數據，那麼我只需發送已在該下拉列表中更改的值。請告訴我什麼是最好的方式來做到這一點。謝謝你提前。

http://jsfiddle.net/6pL2ejuw/

Answer 1

一種方法是將有一個jQuery change事件檢測任何改變的選擇字段的。每次啓動時，都會存儲更改值的索引。然後，當更新按鈕被擊中時，您將瀏覽存儲的索引，檢索它們的值，然後將其發送到您的後端。例如：

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); 
}); 
}); 

小提琴： http://jsfiddle.net/jwang42/6pL2ejuw/6/

Answer 2

使用下面的代碼爲您的解決方案

HTML

<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> 

的JavaScript

$(".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'); 
});