jquery undisable list onselect

Question

Hello,

I have a list of options dependent on what is selected in the first option. How can I make it so that after they select location the second options only displays options avaliable to that location?

Right now I have a bunch of

<option class=2 DISABLED>Blah</option>

jQuery Code

$(document).ready(function() {
  $('#location').change(function() {
    $(.$(this).val()).removeAttr('disabled');
  });
});

The value of the location option is = to the class of the second. But it doesn't seem to work?

Answer 1

The selector needs to be in quotes.

$('.' + $(this).val()).removeAttr('disabled');

Answer 2

For sanitys sake I would change around that selector to something along the lines of:

$(document).ready(function() {
  $('#location').change(function() {
    var curLoc = $(this).val();
    $('.' + curLoc).removeAttr('disabled');
  });
}); 

Edit- Per Jon Cram <option disabled> is acceptable in non-xhtml doctypes.