JS halten auf Auswahlen synchron (keine jquery)

Question

Ich habe zwei SELECT-Elemente auf einer Seite und was ich tun muss, wenn die erste geändert wird, die zweite enthält alle OPTIONEN von der ersten mit Ausnahme der, die ist derzeit in der ersten ausgewählt.

Sie beginnen mit identischen Optionen und ich kann die zweite deaktivieren, bis die erste ausgewählt ist, falls erforderlich. Also, wenn ich habe:

... 
<select id="selectOne" onchange="someFuntion()"> 
    <option value="1">One</> 
    <option value="2">Two</> 
    <option value="3">Three</> 
</select> 

<select id="selectOne" onchange="someFuntion()"> 
    <option value="1">One</> 
    <option value="2">Two</> 
    <option value="3">Three</> 
</select> 
... 

... und zwei ist in der ersten ausgewählt, dann sollte es aus der zweiten entfernt werden. Dann, wenn Drei in der ersten ausgewählt ist, sollte die zweite in der ersten (einschließlich Zwei wieder) alles außer drei aufgelistet haben. Die ersten Optionen ändern sich nie und die Sekunde sollte immer alles außer der aktuell ausgewählten Option enthalten. Irgendwelche Ideen, wie man so etwas am besten erreicht?

Ich kann JQuery nicht in den Mix dafür bringen, also bitte keine Jquery spezifische Antworten. Darüber hinaus offen für so ziemlich alles. Ich kann den Anfangswert, der in der ersten ausgewählt wurde, von der zweiten entfernen, bin mir aber nicht sicher, wie ich mit den Änderungen umgehen soll.

TIA!

Answer 1

Wenn Sie die Optionen in selectTwo deaktivieren, können Sie etwas ähnliches tun. Wenn nicht, können Sie die übereinstimmende Option mit einer display: none-Klasse "ausblenden" und classList.add und classList.remove zum Ausblenden und Anzeigen anstatt zum Deaktivieren und Aktivieren verwenden.

Sowohl die Methoden zum Ausblenden als auch zum Deaktivieren führen dazu, dass das Element, das entfernt werden soll, in selectTwo ausgewählt ist. Keine Strategie ist in dieser Situation großartig. Wenn Sie es vermeiden müssen, können Sie entweder den Wert von selectTwo auf "gut" setzen oder alternativ die untergeordneten Elemente von selectTwo löschen und die nicht ausgewählten untergeordneten Elemente von selectOne klonen und diese zu selectTwo hinzufügen.

Wenn Sie ein Beispiel für die Remove/Clone-Strategie möchten, lassen Sie es mich wissen und ich werde das posten.

function selectClick(event) { 
 
    var that = document.querySelector("#selectTwo"); 
 
    var thatOptions = that.querySelectorAll("option"); 
 

 
    for (var i = 0; i < thatOptions.length; i++) { 
 
    thatOptions[i].disabled = (thatOptions[i].value === this.value); 
 
    } 
 
} 
 

 
document.querySelector("#selectOne").addEventListener("change", selectClick);

<select id="selectOne"> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
</select> 
 

 
<select id="selectTwo"> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
</select>