javascript - 存在未保存的更改时阻止 DropDownList 选择

Question

我有一个页面，其中有四个下拉控件。根据选择，我显示一个数据网格，网格的每一行上都有一个文本框。我在每个控件上获取用户的输入，并在单击“保存”后将其保存到数据库中。

问题:

当页面上有未保存的更改并且用户尝试更改下拉值时，我正在努力提醒用户，这会导致网格上显示不同的数据集。

我有一个隐藏字段，可以捕获页面上发生的更改

<asp:HiddenField ID="hfSaveFlag" runat="server" Value="false" ClientIDMode="Static" />

我启用了文本框更改功能，因此每次发生更改时，我都会将此隐藏字段标志启用为 true。

<asp:TextBox ID="txtRating" runat="server" Text='<%# Eval("rating") %>' Width="25" 
            ValidationGroup="rating" onchange="setPendingSaveFlag()" />

function setPendingSaveFlag(ctrl) {
    $("#hfSaveFlag").val('true');
}

到目前为止效果很好，并且在文本框中的值更改后该值设置为 true。

现在，我的下拉列表如下所示:

<asp:DropDownList ID="ddlRFP" Width="250" runat="server"  AutoPostBack="true" 
                  OnSelectedIndexChanged="ddlRFP_SelectedIndexChanged" />

我在后面的代码中添加了onchange事件

ddlRFP.Attributes.Add("onchange", "verifyPendingSave(this);");

我的 onchange javascript

function verifyPendingSave(ctrl) {
    if ($("#hfSaveFlag").val() == 'true') {
        alert('You have pending changes on the page.');
        return false;
    } else {
         __doPostback(ctrl, '');
         return true;
    }
}

我的意图是，如果隐藏标志的值为 true，我会显示警报、抑制回发并选择之前选择的任何值。为 false 时执行回发。

我看到了警报，但尽管我返回 false，但它并没有停止回发。

我的 else 部分从不回发。我在这部分中看到了控件 ID 和实际控件，但我猜由于它位于 gridview 内，因此可能无法找到回发的偶数。我确信我错过了一些非常微不足道的东西。

else {
    alert(ctrl.id);
    var control = document.getElementById(ctrl.id);
    __doPostback(control, '');
    return true;
}

Answer 1

请找到下面的代码，只需从 javascript 中删除 else 部分

function verifyPendingSave(ctrl) {
            if ($("#hfSaveFlag").val() == 'true') {
                alert('You have pending changes on the page.');
                return false;
            }
                return true;
        }

你的 onchange 函数像这样在下拉菜单上调用

由于返回，__doPostBack永远不会被命中。

onchange="if(!verifyPendingSave()) return false;" 

希望这有帮助