JQuery: 'Uncaught TypeError: Illegal invocation' at ajax request - several elements

Question

I have two select elements, A and B: when A\'s selected option changes, B\'s options must be updated accordingly. Each element in A implies many elements in B, it\'s a one-t

Answer 1

Thanks to the talk with Sarfraz we could figure out the solution.

The problem was that I was passing an HTML element instead of its value, which is actually what I wanted to do (in fact in my php code I need that value as a foreign key for querying my cities table and filter correct entries).

So, instead of:

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

it should be:

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

Note: check Jason Kulatunga's answer, it quotes JQuery doc to explain why passing an HTML element was causing troubles.

Answer 2

Had the same issue recently, solved by adding traditional: true,