0

部門、コース、活動の 3 つのコンボ ボックスがあります。部門テーブルからすべての部門をロードする部門コンボ ボックス。部門に属する 1 つのコンボ ボックスにコースをロードし、別のコンボ ボックスにアクティビティをロードする必要があります。テーブル スキーマを以下に示します。

    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 をロードします。 foo1、foo2、foo3)。

AJAXまたはjQueryで同時に2つの関数を呼び出す方法は?

4

2 に答える 2

2

次のようなことができます：

$('#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
        }
    });
});
于 2013-07-25T09:48:16.150 に答える
0

活動とコースは部門固有のものであるため、特定の部門のコースと活動を JSON オブジェクトで返す 1 つの ajax リクエストを実行します。選択された部門 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);
       }
 );
});
于 2013-07-25T10:12:32.287 に答える