选择选项的编辑遵循第一行中选择选项的值

Question

这是此链接的后续问题。 How can I return the data in select option

我发现该问题的答案是有效的。如果您尝试一次编辑一行，则该程序可以正常工作。但是后来，我尝试让第一行处于编辑模式，另一行处于编辑状态。如果我将性别从男性更改并保存为女性，并且第一行的值仍然是男性，则该行的保存值仍然是男性。希望这看起来并不那么复杂。这是问题如何在选择选项中返回数据的答案的小提琴。 http://jsfiddle.net/srvikram13/te2wF/35/

 function Save() {

        var value3 = $(".gender").attr('value');
        var par = $(this).parent().parent();
        var tdName = par.children("td:nth-child(1)");
        var tdAge = par.children("td:nth-child(2)");
        var tdGender = par.children("td:nth-child(3)");
        var tdButtons = par.children("td:nth-child(4)");

        tdName.html(tdName.children("input[type=text]").val());
        tdAge.html(tdAge.children("input[type=text]").val());
        tdGender.html(value3);
        tdButtons.html("<input type='button' value='Edit' class='btnEdit'/><input type ='button' value='Delete' class='btnDelete'/>");
        $(".btnSave").bind("click", Save);  

        $(".btnDelete").bind("click", Delete);

    };

Answer 1

您总是在当前行中读取第一个选择元素的值，该元素具有类别性别而不是性别

tdGender.html(tdGender.children('select').val());

演示：Fiddle

注意：要从后代元素而不是 $(this).parent().parent() 获取 tr 元素，请使用 var par = $(this).closest('tr')