javascript - jQuery - Remove a drop down item if it is selected by user -

i have 4 drop down lists list of teams in drop down list taken database. i've put code drop down lists below, apologise written in jade's template engine html how i've written code. have put current jquery script below well.

at moment, sort of works, if go team 1 through team 4 , select team, works, if change mind 1 of drop downs...then whole list messes has removed items...

if enter team in team1, should disappear rest of lists....but if change team 1, team should appear in rest of lists again, doesnt @ moment.

any ideas how fix this?

jade drop downs:

div.row     label.control-label(for="team1") team 1:     div.controls         select#team1(style='width: 160px;')             include teamsdropdown div.row     label.control-label(for="team2") team 2:     div.controls         select#team2(style='width: 160px;')             include teamsdropdown div.row     label.control-label(for="team3") team 3:         div.controls             select#team3(style='width: 160px;')                 include teamsdropdown div.row         label.control-label(for="team4") team 4:             div.controls                 select#team4(style='width: 160px;')                     include teamsdropdown 

teamsdropdown jade:

-if(teamslist.length > 0){     option     -each team in teamslist     option.teamdropdown(id="#{team.key}",value="#{team.key}") #{team.name} -}else{     no teams till now.. -} 

jquery script:

script(type='text/javascript') $('select').change(function() {  $('select').not(this).children('option[value=' + $(this).val() + ']').remove(); });   

jfiddle:

http://jsfiddle.net/m8qcz/

maybe can feed needs:

see demo

var $selects = $('select'); $('select').change(function () {     $('option:hidden', $selects).each(function () {         var self = this,             toshow = true;         $selects.not($(this).parent()).each(function () {             if (self.value == this.value) toshow = false;         })         if (toshow) $(this).show();     });     if (this.value != 0) //to keep default option available       $selects.not(this).children('option[value=' + this.value + ']').hide(); });