Targeting a specific Wordpress widget form with jQuery
I'm developing a new Wordpress widget. Its configuration form in the widgets admin panel includes category and subcategory dropdowns (these are not Wordpress categories).
The values for these dropdowns need to be retrieved via AJAX, plus changing the category dropdown should load new values into the subcategory dropdown also via AJAX. To do so, I need to use jQuery to target the current dropdowns, and set a handler for the change event.
How can I get the right jQuery selector in Wordpress to achieve this? The user may add several of these widgets to the sidebar, so I can't use a generic ID or CSS class. Or is there a more reasonable way to code this, maybe using wp_localize_script?
There has to be some unique factor amongst the category dropdowns (since you say making a selection there would load options within the subcategory).
I would use the data() method to attach this unique identifier (whether it be an id, or whatever) to each of these pulldowns, as well as attaching a class to each of the pulldowns (mywidgetname-category, or whatever).
Then iterate over each of the elements that matches your class, attaching a change() event handler that then reads the unique identifier you attached using data(), and modifies the appropriate subcategory select.