一次使用AJAX填充两个不同的combobox
我有3个combobox：部门，课程，活动。 部门combobox将从部门表中加载所有部门。 我需要在一个combobox中加载课程，在另一个combobox中加载属于某个部门的活动。 表模式如下所示。
Department Table ---------------- | Dept | Name | ---------------- | 1 | Dept1 | | 2 | Dept2 | ---------------- Department Course Table ---------------------- | Cid |Dept | Course | ---------------------- | 1 | 1 | abc | | 2 | 1 | xyz | | 3 | 1 | pqr | | 4 | 2 | bar | | 5 | 2 | foo | ---------------------- Department Activities Table --------------------------- | Aid | Dept | Activities | --------------------------- | 1 | 1 | foo1 | | 2 | 1 | foo2 | | 3 | 1 | foo3 | | 4 | 2 | bar1 | | 5 | 2 | bar2 | --------------------------- 部门combobox将加载部门1和部门2.当选择Dept1时，属于Dept1的课程应加载到课程combobox中，即（abc，xyx，pqr）和属于Dept1的活动应加载到活动combobox中，即（ foo1，foo2的，foo3）。
如何在AJAX或jQuery中同时调用两个函数？
你可以这样做：
$('#department_combo').change(function(){ $.ajax({ url: "/someUrl/courses", success: function(data) { // Populate courses with data } }); $.ajax({ url: "/someUrl/activities", success: function(data) { // Populate activities with data } }); });
由于活动和课程是特定于部门的，我会做一个ajax请求，返回JSON对象中特定部门的课程和活动，当选择使用部门1时，它可能看起来像这样：
{ courses : [ {cid:1,course:'abc'}, {cid:2,course:'xyz'}, {cid:3,course:'prq'}], activities : [ {aid:1,activity:'foo1'}, {aid:2,activity:'foo2'}, {aid:3,activity:'foo3'}] }
当用户选择dep2时：
{ courses : [ {cid:4,course:'bar'}, {cid:5,course:'foo'}], activities : [ {aid:4,activity:'bar1'}, {aid:5,activity:'bar2'}] }
因此，在您的部门下拉列表的更改事件中，您的事件处理程序将发出您的ajax请求，并使用从服务器返回的结果填充活动和课程下拉列表。
$('#department').change(function(){ $.ajax( url: 'urlToYourServersideCode', success: function(coursesAndActvities){ var courses = coursesAndActivies.courses, activites = coursesAndActivies.activities, sCourses='', sActivies = ''; for(var idx = 0;idx < activities.length;++idx){ sActivities+= ''; } for(var idx = 0;idx < courses.length;++idx){ sCourses+= ''; } $('#activities).empty().append(sActivities); $('#courses).empty().append(sCourses); } ); });