Justin Hoffman Chicago Drupal WordPress Web Developer

Let's say you have several select dropdowns on the same form. You want three different answers for the same question or a similar one. But you don't want the user to select the same option more than once. This simple jQuery setup with help you out.

There are two parts to the code. One to find which option has been selected and disable it in the other options lists.

//this function determines which option has been selected and disables it in the other boxes
$('#select-group select').blur(function() {
	$('#select-group option:selected').each(function() {
		var v = $(this).val();
		if (v != '') {
			$(this).parents('.selector').siblings('.selector')
			.find('option[value="'+v+'"]').attr('disabled','disabled');
		}
	});
});

And one to make sure the ones deselected are available again.

//re-enables those deselected
$('#select-group select').focus(function() {
	$(this).find('option:selected').each(function() {
		var v = $(this).val();
		if (v != '') {
			$(this).parents('.selector').siblings('.selector')
			.find('option[value="'+v+'"]').removeAttr('disabled');
		}
	});
});

You can download the selection-removal to get all the code.