Question

I am trying to follow this tutorial (http://railscasts.com/episodes/88-dynamic-select-menus) to get dynamic select boxes working with RoR. No need to worry about the RoR bit, this is a Javascript specific question.

Every time this function runs I get the error that the “options” is undefined. I’ve tried running the command manually in the console, but regardless, it spits out undefined. I have it typed exactly as I see it in the tutorial, but somehow it’s not working for me…

Here’s the javascript in question:

function clientSelected() {
var client_id = $('#piece_client_id').val();
// THIS IS THE PROBLEM LINE 
var options = $('piece_campaign_id').options;
options.length = 0;
campaigns.each(function(campaign) {
    if (campaign[0] == client_id) {
        options[options.length] = new Option(campaign[1], campaign[2]);
    }
});
if (options.length == 1) {
  $('campaign_field').hide();
} else {
  $('campaign_field').show();
}
}

Here is the HTML that it’s trying to work on:

<select id="piece_campaign_id" name="piece[campaign_id]"><option value=""></option> 
<option value="1">Feed The Dogs</option> 
<option value="2">Watch Television</option> 
<option value="3">End The Suffering</option> 
<option value="4">Brian Bilbrey</option> 
<option value="5">SummerHill Homes / Yes on A&amp;B</option>
</select> 

Thanks a bunch for taking a look! Let me know if there’s anything else I can add to make my question more clear.

Answer 1

Try:

var options = $('#piece_campaign_id').get(0).options;

or

var options = $('#piece_campaign_id')[0].options;

As you were using a jQuery object, which doesn’t have an options property. Also, make sure to include the id selector (#).