0

Hi all

I have multiple select boxes that have various options such as 'bangles', 'rings', 'earings' etc and I have a div that doesn't display until an option has been selected from one of the select boxes. If the option 'rings' is selected I don't want to display the div '#size'.

Jquery function:

$('#team1, #team2').change(function () {
	if($(this + ' option:selected').text == 'Rings')
	{
		$('#size').slideUp('fast');
	}
	else
	{
		$('#size').slideDown('fast');
	}
});

The trouble I'm having is that I can't figure out how to use $(this) with option:selected. if I simply put the id of one of the select boxes then it works, but only for that one select box. I want it to be dynamic.

Any help would be greatly appreciated.

1
Contributor
1
Reply
2
Views
7 Years
Discussion Span
Last Post by Venom Rush
0

Ok, seems I fixed my issue with the following code

$('#team1, #team2').change(function () {
	var selectBox = $(this).attr('id');
	if($('#' + selectBox + ' option:selected').text() == 'Rings')
	{
		$('#size').slideUp('fast');
	}
	else
	{
		$('#size').slideDown('fast');
	}
});
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.