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.

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');
	}
});
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.