Ajax数据在下拉列表中没有正确绑定。

I have a gridview in which there are multiple rows with Edit options in each row. So what exactly the scenario is, whenever I click on EDIT button it will redirect me to next tab with the SAP ID of that row filled in the dropdownlist.

我有一个gridview，其中有多个行，每一行都有编辑选项。具体的情况是，每当我点击编辑按钮时，它会将我重定向到下一个选项卡，其中填充了dropdownlist中的行SAP ID。

But currently what happening is, when I click the edit button for the first time, it shows only one value in the list,

但目前的情况是，当我第一次点击编辑按钮时，它只显示列表中的一个值，

but when I click second time, the list shows me two values. I dont want that, I want only the data value for which I have clicked the edit button.

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

Below is my GridView and ajax code for binding values

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

GRIDVIEW

显示数据表格

<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

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..!!');
            }
        })

1 个解决方案

#1

You probably have to remove the dropdown list item before you add new. You can call remove() on children of dropdown (select)

在添加新项之前，您可能需要删除下拉列表项。您可以对下拉菜单的子元素(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);
        },