JQuery: 'Uncaught TypeError: Illegal invocation' su richiesta ajax - diversi elementi

Ho due elementi selezionati, A e B: quando l'opzione selezionata di A cambia, le opzioni di B devono essere aggiornate di conseguenza. Ogni elemento in A implica molti elementi in B, è una relazione uno-a-molti (A contiene nazioni, B dovrebbe contenere città situate nella nazione data).

La funzione do_ajax dovrebbe eseguire la richiesta asincrona:

function do_ajax(elem, mydata, filename)
{
    $.ajax({
        url: filename,
        context: elem,
        data: mydata,
        datatype: "html",
        success: function (data, textStatus, xhr) {
            elem.innerHTML = data;
        }
    });
}

Per aggiornare le opzioni di B ho aggiunto una chiamata di funzione nell'evento onChange di A. Ecco la funzione che viene eseguita quando viene attivato l'evento onChange (di A):

function my_onchange(e) // "e" is element "A"
{
    var sel_B = ... ; // get select element "B"

    // I skipped some code here
    // ...

    var data = {
        'mode': 'filter_city',
        'id_A': e[e.selectedIndex]
    };
    do_ajax(city_sel, data, 'ajax_handler.php');
}

}

Ho letto in documenti JQuery che data può essere un array (coppie chiave-valore). Ottengo l'errore se inserisco:

var data = {
        'mode': 'filter_city',
        'id_A': e[e.selectedIndex]
};

Invece, non ottengo quell'errore se i miei dati sono una stringa:

var data = 'mode=filter_city&id_A=' + e[e.selectedIndex];

Ma ho bisogno della "versione array" della variabile, nel mio codice php lato server.

Il Uncaught TypeError: Illegal invocation si trova nel file "jquery-1.7.2.min.js", che è tutto compresso, quindi non sono riuscito a capire quale parte del codice ha generato l'errore .

C'è qualche impostazione che posso modificare nel mio codice in modo che accetti i dati come array associativo?