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

【问题标题】：Populate two different combo boxes using AJAX at a time一次使用 AJAX 填充两个不同的组合框
【发布时间】：2013-07-25 18:12:32
【问题描述】：

我有 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的课程应加载在课程组合框中，即（ABC，XYX，PQR）和属于Dept1的活动，应加载在活动组合框中，即（Foo1，Foo2，Foo3）。

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

【问题讨论】：

标签： jquery sql ajax combobox

【解决方案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
        }
    });
});

【讨论】：

@hungerpain 感谢您的更正，它输入这个 sn-p 太快了。我的错！

【解决方案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);
       }
 );
});

【讨论】：