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

Answer 2

The simplest vay to check it on submit is:

$("#list1").val() !== $("#list2").val();

And if you want to make it non selectable you could something like this:

$("#list1").change(function(){

    $("#list2 [value=" + $(this).val() + "]").attr("disabled","disabled");

})

To erase previous disabled options:

$("#list1").change(function(){

    $("#list2").find("option").each(function(){
        $(this).removeAttr("disabled");
    });
    $("#list2 [value=" + $(this).val() + "]").attr("disabled","disabled");

})