Question

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?

Answer 1

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.