I have a table of data which is part of a sample. I would like to assign each column to a different person so 'Kevin' would take column one, 'Bryan' would take column two, 'Cath' column three and so on. Once their name has been used I would like it to be removed from all other dropdowns and if a different person is selected I would like their name to reappear for selection in another dropdown.
There can be an infinite number of columns but never more than the number of people available so I don't have to worry about the dropdown 开发者_运维技巧running out of names.
I would like this doing on the fly using jQuery if possible. Has anybody got any example code that I could modify to fit?
It is a lot simpler to just disable options which have been selected elsewhere, making the problem one of not adding/removing options but just disabling the options which have already been selected.
If this is acceptable, the code boils down to this:
$('select').live('change',function(){
//enable all options
$('select option').attr('disabled',false);
// disable in other select boxes items which has been selected in the currently changed one
$('select').each(function(){
var $this = $(this);
$('select').not($this).find('option').each(function(){
if($(this).attr('value') == $this.val())
$(this).attr('disabled',true);
});
});
});
See live example here: http://jsfiddle.net/S7PfY/
In that example I have dynamically created a dropdown in 3 cells, and when you select a name in one cell this name is no longer selectable in any other, unless it is first unselected.
精彩评论