Triggering Ajax onchange on a select list

Question

I am working on a Drupal project which is using the Editable fields module.

Using that module I'm exposing a dropdown list of text options. It works just great. You click on the list, select an option and the option is updated via Ajax.

My challenge is I'm trying to change the options programmatically via jQuery. Using the following code:

jQuery('select#edit-field-status-0-field-status-und').val(1);

... my browser console area is happy with the code but the Ajax update does not take place. I tried:

jQuery('select#edit-field-status-0-field-status-und').val(1).change();

Again no errors but the Ajax event still did not execute.

Answer 1

The code I was using as recreated below was correct:

jQuery('select#edit-field-status-0-field-status-und').val(1).change();

I found out the reason why it wasn't working was because the ID of the target element changed dynamically. So when I first inspected and found edit-field-status-0-field-status-und, the same element would change IDs to something like edit-field-status-0-field-status-und--1.

That was throwing things off and gave the impression my code wasn't working.

Thanks to @gts for your input.

Answer 2

$('#edit-field-status-0-field-status-und').val("1");

will do the trick, as the only reason it wouldn't work would be that you have your select values as strings instead of numbers.

Alternatively the following is more detailed:

$('#edit-field-status-0-field-status-und option').eq(1).prop('selected', true);

Also this is not an 'AJAX' function, it's simply Jquery updating the DOM for the particular element.