How to select drop downs inside any div?

Question

I am using ExtJs with Jquery. I have a panel under which I have check boxes, radios and drop downs. I am using the following code to get all the items under the panel.

    $('#panelId : input').each

This works for radio and check boxes. But, I am trying the following for drop down and it is not working

    $('#panelId : select').each

Experts please guide me.

Note: I am painting raw html into the panel using XTemplate. So I am not able to retrieve the items using extjs (Rather I don't know!). Can any one suggest the same using extjs?

Answer 1

:select is not a valid selector. Please read the jQuery selector documentation.

You can see a quick fiddle here to see it working and help you understand how to use the proper input or select jQuery selectors.

Answer 2

The jQuery selector function $ expects a valid CSS selector as an argument. If you want all <select> elements under the parent ID, then this should do what you want:

$('#panelId select').each(...

Note in the above that there's no colon between #panelId and select. Colon characters in CSS are reserved for pseudo selectors like :hover.

If you want more than one kind of child element, you can specify multiple selectors by separating them with commas. e.g.

$('#panelId select, #panelId input').each(...

An even better way would be to start with the panel, then select just the matching descendants:

$('#panelId').find('select, input').each(...

Hope this helps!