2つの異なる選択htmlタグで同じ選択を無効にする方法

Question

タイトルはおそらく混乱しますが、私は説明します。私はフライトのオンライン予約のためにウェブページのフロントエンドを作る必要があります。このページには、ユーザーが旅行したい空港と目的地を選択する必要がある2つのドロップダウンメニューがあります。それで、私の仕事の一部と問題は、どのように私は2つの同じ選択肢を無効にすることができますか？論理的には、パリからパリまで飛行することはできません。

Answer 1

ロード時には、ある意味では、スナップショットオリジナルのオプションはslice()経由です。次に、イベントリスナーで、元の選択ボックスで選択した内容に基づいてフィルタを適用します。選択したオプションのグループがあれば、宛先の選択ボックスを空にして、フィルタリングされたものと再集計します。擬似コードで

const destination = document.getElementById('destination'); 
 

 
const originalOptions = Array.from(destination.options).slice(0); 
 

 
document.getElementById('origin').addEventListener('change', e => { 
 
    const currentOptions = Array.from(originalOptions).filter(option => option.value !== e.currentTarget.value); 
 
    
 
    destination.length = 0; 
 
    
 
    currentOptions.forEach(option => destination.appendChild(option)); 
 
});

<select id="origin"> 
 
    <option value="paris">Paris</option> 
 
    <option value="london">London</option> 
 
    <option value="australia">Australia</option> 
 
</select> 
 

 
<select id="destination"> 
 
    <option value="london">London</option> 
 
    <option value="paris">Paris</option> 
 
    <option value="australia">Australia</option> 
 
</select>