[解決済み】JQuery: 'Uncaught TypeError: ajaxリクエストで「Illegal invocation」が発生する - 複数の要素

質問

AとBの2つのselect要素があります。Aのselectedオプションが変わると、それに応じてBのオプションも更新されなければなりません。Aの各要素はBの多くの要素を意味し、それは一対多の関係です（Aは国家を含み、Bは与えられた国家に位置する都市を含むはずです）。

関数 do_ajax は非同期リクエストを実行する必要があります。

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

B のオプションを更新するために、A の onChange イベントが発生します。以下は、onChange イベント ( 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');
}

}

で読んだことがあります。 JQueryドキュメント その data は配列（キーと値のペア）にすることができます。と入れるとエラーになります。

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

その代わり、データが文字列の場合はそのエラーは出ません。

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

しかし、私はサーバー側のPHPコードで、変数の"配列バージョン"を必要とします。

その Uncaught TypeError: Illegal invocation は "jquery-1.7.2.min.js" ファイル内にあり、全て圧縮されているので、どの部分のコードがエラーを発生させたのかが分かりませんでした。

データを連想配列で受け取るようにするために、コードで変更できる設定はありますか？

どのように解決するのですか？

とのお話のおかげで サルブラズ 解決策を見出すことができました。

問題は、私がHTML要素の値の代わりに渡していたことで、これは実際に私がやりたかったことです（実際、私のPHPコードでは、その値は私の cities テーブルを作成し、正しいエントリをフィルタリングします)。

だから、代わりに

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

となるはずです。

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

注 Jason Kulatungaの 回答 JQueryのドキュメントを引用して、なぜHTML要素を渡すと問題が発生するのかを説明しています。