Link to home
Start Free TrialLog in
Avatar of vacpartswarehouse
vacpartswarehouseFlag for United States of America

asked on

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?
ASKER CERTIFIED SOLUTION
Avatar of guru_sami
guru_sami
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
 $("#menu-selector").change(function () {
   $(this).fadeIn('slow');
            });

Open in new window

Avatar of vacpartswarehouse

ASKER

This is perfect! Thank you so much!