Edit I think this what the OP meant
i have three select boxes with each 5 similar options. when I select an option from any of the select boxes it should disappear from the other two select boxes.
i have done work here js fiddle link: http://jsfiddle.net/thilakar/x66EN/13/
Note: Again select an option from any of the select boxes. the hidden option should display in the other two select boxes.
$(function() { var sbox = $('select.selectArea[name=fromBox]'); $('select.selectArea').change(function() { var val = this.value, allVals = []; sbox.each(function() { allVals.push(this.value); }); sbox.each(function(index, sel) { $('option:hidden', this).show(); $('option', this).map(function(i, x) { if(this.value != '0' && $.inArray(this.value, allVals) != -1) { $(this).hide(); } }); }); }); }); 
How about this jsFiddle example? It doesn't remove the elements as you select them, it just disables them. This way if the user changes their mind, they can go back and make changes.
jQuery:
$('.selectArea').change(function() { var ary = new Array(); $('.selectArea option:selected').each(function() { if ($(this).val().length > 0 && $(this).val() != 0) { ary.push($(this).val()); } }); $('.selectArea option').each(function() { if ($.inArray($(this).val(), ary) > -1) { $(this).attr('disabled', 'disabled'); } else { $(this).removeAttr('disabled'); } }); }); 