Trying to access the options of a dropdown box using jQuery/javascript, but it's saying that .options is undefined?

Question

I'm creating a dropdown box dynamically in jQuery by appending html as follows:

.append("<br><SELECT  NAME='Month_list' class='month_selection'</SELECT>");

It gets created fine, but I'm trying to dynamically add options to it using the following code:

$('.month_selection:last').options.add(new Option(month_array[index]));

but I'm getting the following error in Firebug:

$(".month_selection:last").options is undefined

The selector is working fine, because I can run the line of code $(".month_selection:last").remove() and the dropdown box gets removed, and from what I can tell from various tutes .options is how to access the options, so what am I doing wrong? Thanks for reading.

Answer 1

You need to get the <select> DOM element to access .options like this:

$('.month_selection:last')[0].options
//or...
$('.month_selection').get(-1).options

You an give it a try here.

For DOM properties you need to get the DOM element you care about first (via [0] or .get(0) in this case) then access its properties, otherwise you're trying to access properties on the jQuery object which don't exist.