Question

我有一个Telerik RadComboBox，当更改时触发一些使用AJAX的Javascript从数据库中获取一些数据，并用值填充第二个下拉列表。问题是我想根据第二个下拉列表中的选择填充一些带有数据的文本框。第二个下拉列表是标准的ASP.NET下拉列表。以下是两个下拉列表的代码：

<telerik:RadComboBox ID="rcbCustomer" runat="server" CssClass="form-control field-standard-size fix-background-white input-sm" width ="300px" Height="140px"
                        EmptyMessage="Type here to find sold-to customer" LoadingMessage="Please wait, loading..." AutoPostBack="true"
                        RegisterWithScriptManager="false" EnableEmbeddedScripts="true" EnableVirtualScrolling="true" OnClientSelectedIndexChanged="rcbCustomer_IndexChanged">
                    </telerik:RadComboBox>


<asp:DropDownList ID="hidShipTo" runat="server" Height="24px" Font-Size="x-small" CssClass="form-control input-sm width-300 form-fixer" AutoPostBack="True" ></asp:DropDownList>

当第一个下拉列表被更改时，它会触发此Javascript函数，该函数会填充第二个列表：

function rcbCustomer_IndexChanged(sender, args) {

                //var strData = $("#<%=rcbCustomer.ClientID%>").val()
                var strComboID = $find("<%=rcbCustomer.ClientID%>");
                var strValue = strComboID.get_value();
                var strData = "{strCustomerSoldSelected: '" + strValue + "' }";
                //alert(strData);
                $.ajax({
                    type: "POST",
                    url: "/webservices/ProductServer.asmx/GetShipToData",
                    data: strData,
                    contentType: "application/json; character=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        $("#<%=hidShipTo.ClientID %>").empty().append($("<option></option>").val("[-]").html("Please select"));
                        $.each(msg.d, function () {
                            $("#<%= hidShipTo.ClientID %>").append($("<option></option>").val(this['Value']).html(this['Text']));
                        });
                    },
                    failure: function (xhr, ajaxoptions, thrownError) {
                        alert("Error1:" + xhr.status);
                        alert("Error2:" + thrownError);
                    }
                });
                //alert("the end");
            }

然后我将第二个下拉列表的更改事件绑定如下：

$("#<%=hidShipTo.ClientID%>").change(hidShipTo_IndexChanged());

然后我希望它运行另一个使用AJAX来获取数据以填充其他文本框的函数。这是该功能（现在它被设置为仅在我知道它运行之前发出警报）：

 function hidShipTo_IndexChanged(sender, args) {
                var strData = "";
                alert("yes");
                $.ajax({
                    type: "POST",
                    url: "/webservices/ProductServer.asmx/PopulateShipToDetails",
                    data: strData,
                    contentType: "application/json; character=utf-8",
                    dataType: "json",
                    success: function (msg) {
                        alert(msg);
                    },
                    failure: function (xhr, ajaxoptions, thrownError) {
                        alert("Error1:" + xhr.status);
                        alert("Error2:" + thrownError);
                    }
                });
            }

问题是更改事件似乎没有触发。关于可能是什么原因或可能采用不同方法的任何想法？

Answer 1

您正在调用函数而不将其分配给事件处理程序

更改

$("#<%=hidShipTo.ClientID%>").change(hidShipTo_IndexChanged()); //Remove ()

到

$("#<%=hidShipTo.ClientID%>").change(hidShipTo_IndexChanged);

Answer 2

您没有分配功能，您正在调用它

$("#<%=hidShipTo.ClientID%>").change(hidShipTo_IndexChanged());
                                                           ^^^

需要

$("#<%=hidShipTo.ClientID%>").change(hidShipTo_IndexChanged);
                                                          ^^^

Answer 3

您可以看一下如何在客户端

呈现此服务器端指令

    $("#<%=hidShipTo.ClientID%>").change(hidShipTo_IndexChanged());

Answer 4

处理它的最佳方法是从未命名的函数调用它。

像这样：

$("#<%=hidShipTo.ClientID%>").change(function(){hidShipTo_IndexChanged();});

Answer 5

我通过从ASP下拉列表更改为常规SELECT输入控件并且事件绑定正确并且代码现在正常运行来解决了这个问题。这是一个消除回发刷新的转换，所以我真的不需要ASP下拉列表。我仍然很好奇为什么事件不能正确绑定，但问题现在已经解决了。我想发布这个以防其他人有类似的问题。谢谢大家的帮助！

SelectedIndexChanged事件未在动态创建的下拉列表中触发

5 个答案: