How to make sure two select menu values are not the same with jquery?

Question

I have two different select menus (menu A and menu B). Both with the same values. How do I make sure selected menu A value is not equal to menu B value onsubmit? Would be cool if the selected menu A becomes non selectable on menu B?

Any suggestions?

Answer 1

Use the following code to diable the option in the second select

$('.select1').on('change',function(){
 var optionInSelect2 = $('.select2').find('option[value="'+$(this).val()+'"]');
 if(optionInSelect2.length) {
   optionInSelect2.attr('disabled','disabled');
  }
});

demo