Daten ändern, basierend auf Auswahl Ajax

Question

Ich habe folgenden Ajax-Aufruf:

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


       }); 

Das ruft die folgende Web Methode

[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; 
} 

dies das zurück Ergebnis Tabelle anhängt . Ich möchte Dropdown-Liste hinzufügen, die die Daten des Parameters "ddlFilter" ändern wird, so dass das Ergebnis geändert wird.

Ich bemerke, dass es .change() Anruf, aber wo es zu platzieren?

Answer 1

sagen Lassen Sie Ihre Ajax-Aufruf in einer Funktion lebt myAjaxCall genannt

Dann Sie die Funktion über den Wechsel der #ddlFilter wie so auslösen kann:

$('#ddlFilter').change(myAjaxCall);

Answer 2

können Sie onchange Ereignis von dropdown verwenden denen senden Sie die selected value an webservice method.

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


       }); 
} 

Sie können auch Wert von Dropdown bekommen einfach durch $("#dropdownid").val() mit so dass keine Notwendigkeit

$("#filter").children("option").filter(":selected").val() 

Gerade

$("#filter").val()