CODEWITHSUNDEEP
jquery
R4mirezZ
R4mirezZ

Reputation: 39

Remove select menu option from other select menus on page based on value

I have a form that contains 10 select menus , each one containing 20 options .

I want to make the user not be able to select the same value from the select menus , If he chooses one option it will be removed from other menus but not from the current menu, and when he changes his choice the option will show again and the new choice will hide ..

I can't figure out a way to do that , so I will appreciate your help . thank you

Upvotes: 1

Views: 94

Answers (1)

Domain
Domain

Reputation: 11808

I think this will help you , i have written this in JQuery so necessary script files must be included for it to work 

(function () {
    var previous;

    $("select").on('focus', function () {
        previous = this.value;
    }).change(function(){
    $elm=$(this).children('option:selected');
    $a=$elm.val();
    $('[value='+$a+']').not( $elm).hide();
     $('[value='+previous+']').not( $elm).show();   

    });
})();

below is a demo

DEMO

Upvotes: 2

Related Questions