下拉列表中的 Ajax 数据未正确绑定答案

【问题标题】：Ajax data not binding properly in the dropdownlist下拉列表中的 Ajax 数据未正确绑定
【发布时间】：2017-08-25 06:53:39
【问题描述】：

我有一个gridview，其中有多行，每行都有Edit 选项。那么具体的场景是什么，每当我点击EDIT 按钮时，它都会将我重定向到下一个选项卡，该行的SAP ID 填入dropdownlist。

但目前发生的情况是，当我第一次单击edit button 时，列表中只显示一个值，

但是当我单击第二次，列表显示了两个值。我不想要那个，我只想要我点击了编辑按钮的数据值。

下面是我用于绑定值的 GridView 和 ajax 代码

网格视图

<asp:GridView ID="grdSapDetails" runat="server" PageSize="10" AutoGenerateColumns="false">
                <Columns>
                    <asp:BoundField DataField="SAP_ID" HeaderText="Sap Id" />
                    <asp:BoundField DataField="SITE_NAME" HeaderText="Site Name" />
                    <asp:BoundField DataField="SITE_ADDRESS" HeaderText="Site Address" />
                    <asp:TemplateField HeaderText="Edit">
                        <ItemTemplate>
                            <input type="button" onclick='return HighlightTabFunction(this)' value="Edit" id="btnEdit" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

AJAX

function HighlightTabFunction(a) {
        var row = a.parentNode.parentNode;
        var rowIndex = row.rowIndex - 1;
        var SAPID = row.cells[0].innerHTML;
        $.ajax({
            url: "UBRDashboard.aspx/GETSTATEFROM_SAP",
            dataType: "json",
            type: "POST",
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ SAPID: SAPID }),
            async: true,
            processData: false,
            cache: false,
            success: function (r) {
                $('a[href="#tabs-2"]').click();
                var ddlSapID = $("[id*=ddlSapID]");
                ddlSapID.append($("<option></option>").val(r.d).html(row.cells[0].innerHTML));
                $("#hdnState").val(r.d);
            },
            error: function (xhr) {
                alert('Error while selecting list..!!');
            }
        })

【问题讨论】：

标签： javascript asp.net ajax gridview

【解决方案1】：

您可能必须先删除下拉列表项，然后再添加新项。您可以在children 的dropdown (select) 上致电remove()

success: function (r) {
            $('a[href="#tabs-2"]').click();
            var ddlSapID = $("[id*=ddlSapID]");
            ddlSapID.children().remove(); //this will remove option before appending new 
            ddlSapID.append($("<option></option>").val(r.d).html(row.cells[0].innerHTML));
            $("#hdnState").val(r.d);
        },

【讨论】：