Javascript 使用Ajax根据选择更改数据

我有以下ajax调用：

.ajax({
                    url: "WebService.asmx/showResult",
                    type: "post",
                    data: JSON.stringify({
                        "dateFrom": $('#txtDateFrom').val(),
                        "dateTo": $('#txtDateTo').val(),
                        "ddlType": $("#ddlType").children("option").filter(":selected").val(),
                        "ddlTer": $("#ddlTer").children("option").filter(":selected").val(),
                        "ddlFilter": $("#filter").children("option").filter(":selected").val()
                    }), // parameters
                    beforeSend: function () {
                        $('#loader').html('<img src="Images/loading.gif" />');
                    },
                    contentType: "application/json; charset=utf-8",
                    success: function (result) {
                        $('#loader').html('');
                        //To delete the whole tr except the first one.
                        $("#tblUsers").find("tr:gt(0)").remove();
                        $('#tblUsers').append(JSON.stringify(result));

                    },
                    error: function () {
                        alert('error');
                    }


                });

.ajax({
url:“WebService.asmx/showResult”，
类型：“post”，
数据：JSON.stringify({
“dateFrom”：$（'#txtDateFrom'）.val（），
“dateTo”：$（'#txtDateTo'）.val（），
“ddlType”：$（“#ddlType”）.children（“选项”）.filter（“：selected”）.val（），
“ddlTer”：$（“#ddlTer”）.children（“选项”）.filter（“：selected”）.val（），
“ddlFilter”：$（“#filter”）.children（“选项”）.filter（“：selected”）.val（）
})，//参数
beforeSend:函数（）{
$（'#loader'）.html（''）；
},
contentType:“应用程序/json；字符集=utf-8”，
成功：功能（结果）{
$（'#loader'）.html（''）；
//删除除第一个tr之外的整个tr。
$（“#tblUsers”）.find（“tr:gt（0）”）.remove（）；
$（'#tblUsers'）.append（JSON.stringify（result））；
},
错误：函数（）{
警报（“错误”）；
}
});

这将调用以下Web方法

[WebMethod]
public string showResult(DateTime dateFrom, DateTime dateTo,string ddlFilter)


{
  System.Threading.Thread.Sleep(500);
      string result = "";
   // return dateFrom.ToString();
 string filter=ddlFilter.ToString();
 var sp = db.divideTypes(dateFrom, dateTo,ddlFilter).ToList();
 foreach (var u in sp)
 {
        result += "<tr>";
        result += "<td>"+u.depno+"</td>";
        result += "</tr>";
 }
 return result;
}

[WebMethod]
公共字符串showResult（DateTime dateFrom、DateTime dateTo、字符串ddlFilter）
{
系统.线程.线程.睡眠（500）；
字符串结果=”；
//返回日期from.ToString（）；
字符串过滤器=ddlpilter.ToString（）；
var sp=db.divideTypes（dateFrom、dateTo、ddlFilter）.ToList（）；
foreach（sp中的var u）
{
结果+=”；
结果+=“”+u.depno+“”；
结果+=”；
}
返回结果；
}

这将把返回的结果添加到表中。 我想添加一个下拉列表，该列表将更改参数“ddlFilter”的数据，从而更改结果

---

我注意到有.change（）调用，但它应该放在哪里？

假设您的ajax调用存在于一个名为

myAjaxCall

然后您可以在更改

#ddlFilter

时触发该功能，如下所示：

---

$（'ddlFilter'）.change（myAjaxCall）

您可以使用

下拉列表的
onchange
事件，它将
所选值发送到
Web服务方法

<asp:DropDownList ID="filter" onchange="CallService()" runat="server">

</asp:DropDownList>

function CallService(){
.ajax({
                    url: "WebService.asmx/showResult",
                    type: "post",
                    data: JSON.stringify({
                        "dateFrom": $('#txtDateFrom').val(),
                        "dateTo": $('#txtDateTo').val(),
                        "ddlType": $("#ddlType").val(),
                        "ddlTer": $("#ddlTer").val(),
                        "ddlFilter": $("#filter").val()
                    }), // parameters
                    beforeSend: function () {
                        $('#loader').html('<img src="Images/loading.gif" />');
                    },
                    contentType: "application/json; charset=utf-8",
                    success: function (result) {
                        $('#loader').html('');
                        //To delete the whole tr except the first one.
                        $("#tblUsers").find("tr:gt(0)").remove();
                        $('#tblUsers').append(JSON.stringify(result));

                    },
                    error: function () {
                        alert('error');
                    }


                });
}

只用

$("#filter").val()

当
filter
更改时，您想调用
ajax函数
？是的，但方式不同，我想调用相同的ajax函数，即
“WebService.asmx/showResult”
，但使用不同的
“ddlFilter”：$（“#filter”）.children（“option”）.filter（：selected”）.val（）
将由用户更改的参数谢谢您的回复
$("#filter").val()