Question

我有3个组合框：部门，课程，活动。部门组合框将从部门表中加载所有部门。我需要在一个组合框中加载课程，在另一个组合框中加载属于某个部门的活动。表模式如下所示。

    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       |
    ---------------------------

部门组合框将加载部门1和部门2。当选择Dept1时，属于Dept1的课程应加载到Courses组合框中，即（abc，xyx，pqr）和属于Dept1的活动应加载到Activities组合框中，即（foo1，foo2，foo3）。

如何在AJAX或jQuery中同时调用两个函数？

Answer 1

您可以这样做：

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

Answer 2

由于活动和课程是特定于部门的，我会做一个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+= '<option value="'+ activities[idx].aid +'">' + activities[idx].activity +'</option>';

           }
           for(var idx = 0;idx < courses.length;++idx){         
               sCourses+= '<option value="'+ courses[idx].aid +'">' + courses[idx].course+'</option>';

           }
           $('#activities).empty().append(sActivities);
           $('#courses).empty().append(sCourses);
       }
 );
});

一次使用AJAX填充两个不同的组合框

2 个答案: