Change HTML class based on select option value through JavaScript/jQuery

I have a long list of options in a select menu.

<select name="top-menu" id="menu-selector">
	<option value="#">Choose a category</option>
	<option value="ABC">ABC</option>
	<option value="DEF">DEF</option>
	<option value="GHI">GHI</option>
</select>

Open in new window

When an option is selected, jQuery will fade in a new select menu based on the value of that option. In other words, choosing ABC will fade in another select menu where id="ABC". As of right now, I have this.

$(document).ready(function (){
	$("#menu-selector").change(function() {
		document.getElementById($(this).val()).fadeIn('slow');
	});
});

Open in new window

However, that's not working. It throws this error:
Uncaught TypeError: Object #<HTMLSelectElement> has no method 'fadeIn'

Open in new window

How can I fix this?
vacpartswarehouseAsked:
Who is Participating?
 
guru_samiCommented:
Try this:
 $("#menu-selector").change(function () {
                $("#" + $(this).val()).fadeIn('slow');
            });

Open in new window

0
 
KhiluCommented:
 $("#menu-selector").change(function () {
   $(this).fadeIn('slow');
            });

Open in new window

0
 
vacpartswarehouseAuthor Commented:
This is perfect! Thank you so much!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.