Désactiver plusieurs valeurs dans les listes déroulantes en fonction d’une autre liste déroulante

Je veux désactiver plusieurs valeurs dans les deuxième et troisième listes déroulantes en fonction de la première liste déroulante des valeurs sélectionnées.Je peux le faire pour une seule valeur sélectionnée.Mais comment procéder pour plusieurs valeurs sélectionnées.

J’ai 3 listes déroulantes et toutes sont des listes déroulantes à sélection multiple. Mon code est,

      $(window).load(function(){ var $dropdown1 = $("select[name='project_manager[]']"); var $dropdown2 = $("select[name='test_engineer[]']"); var $dropdown3 = $("select[name='viewer[]']"); $dropdown1.change(function() { $dropdown2.empty().append($dropdown1.find('option').clone()); $dropdown3.empty().append($dropdown2.find('option').clone()); var selectedItem = $(this).val(); if (selectedItem) { $dropdown2.find('option[value="' + selectedItem + '"]').prop('disabled', true); $dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true); } }); $dropdown2.change(function() { $dropdown3.empty().append($dropdown2.find('option').clone()); var selectedItem = $(this).val(); if (selectedItem) { $dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true); } }); });      Test 1 Test 2 Test 3    Test 1 Test 2 Test 3    Test 1 Test 2 Test 3   // tell the embed parent frame the height of the content if (window.parent && window.parent.parent){ window.parent.parent.postMessage(["resultsFrame", { height: document.body.getBoundingClientRect().height, slug: "vrLr9wyg" }], "*") }