Warum werden nicht alle ausgewählten Auswahloptionen entfernt?

Question

Ich arbeite an einem interaktiven Formular.

Ein Benutzer wird zwischen zwei Designs von T-Shirt wählen: "JS Puns" oder "Ich liebe JS".

Es gibt 6 Farben insgesamt T-Shirt. Wenn "JS Puns" ausgewählt ist, stehen nur die ersten 3 Farben zur Auswahl zur Verfügung. Umgekehrt, wenn "I love JS" als Design ausgewählt wird, werden nur die letzten 3 Farben ausgewählt. Insbesondere sind nur die verfügbaren Farben in der Farbauswahlbox sichtbar.

Aus irgendeinem Grund, ich bin in der Lage 1 oder 2 der Farben zu entfernen, aber ich bin nicht in der Lage alle notwendigen 3.

Hier zu löschen ist ein Ausschnitt aus dem HTML ich mit Arbeit bin:

Hier

<div> 
      <label for="design">Design:</label> 
      <select id="design" name="user_design"> 
      <option>Select Theme</option> 
      <option value="js puns">Theme - JS Puns</option> 
      <option value="heart js">Theme - I &#9829; JS</option> 
      </select> 
     </div> 

     <div id="colors-js-puns" class=""> 
      <label for="color">Color:</label> 
      <select id="color"> 
      <option value="cornflowerblue">Cornflower Blue (JS Puns shirt only)</option> 
      <option value="darkslategrey">Dark Slate Grey (JS Puns shirt only)</option> 
      <option value="gold">Gold (JS Puns shirt only)</option> 
      <option value="tomato">Tomato (I &#9829; JS shirt only)</option> 
      <option value="steelblue">Steel Blue (I &#9829; JS shirt only)</option> 
      <option value="dimgrey">Dim Grey (I &#9829; JS shirt only)</option> 
      </select> 
     </div> 

ist die JS:

// T-Shirt Info section of the form. 
// For the T-Shirt color menu, only display the options that match the design selected in the "Design" menu. 
document.getElementById("design").addEventListener("change", function(){ 
    var tShirtMenu = document.getElementById('design'); 
    var tSelection = tShirtMenu.value; 
    var tColor = document.getElementById('color'); 
    var colorSelection = tColor.options; 

    if(tSelection === "js puns"){ 
     // If the user selects "Theme - JS Puns" then the color menu should only display "Cornflower Blue," "Dark Slate Grey," and "Gold." 
     colorSelection.remove(3); 
     colorSelection.remove(4); 
     //colorSelection.remove(5); 
    } else if (tSelection === "heart js"){ 
     // If the user selects "Theme - I ♥ JS" then the color menu should only display "Tomato," "Steel Blue," and "Dim Grey." 
     colorSelection.remove(0); 
     colorSelection.remove(1); 
     colorSelection.remove(2); 
    } 
}); 

Irgendwelche Vorschläge? Danke

Answer 1

Okay, so ist dies wirklich beschissen ... aber ich regelte es wie folgt aus:

ich alle Optionen im HTML gelöscht, fügte aber hinzu, in einem extra: <option><-- Please select a T-shirt theme</option>

In meinem JS, Ich setzte dann das innerHTML des Farbenauswahlfeldes zurück, das auf der Wahl der Themawahl basiert.

So sah es so aus. Andernfalls, wie nnnnnn angedeutet hat, müsste ich sie, wenn ich sie entfernt habe, irgendwie herausnehmen und als temporäre Variablen speichern, damit ich sie später erneut eingeben kann.

Also hier ist es.

Bitte lassen Sie mich wissen, wie ich dies verbessert haben könnte:

// T-Shirt Info section of the form. 
// For the T-Shirt color menu, only display the options that match the design selected in the "Design" menu. 
document.getElementById("design").addEventListener("change", function(){ 
    var tShirtMenu = document.getElementById('design'); 
    var tSelection = tShirtMenu.value; 
    var tColor = document.getElementById('color'); 
    var colorSelection = tColor.options; 

    if(tSelection === "selectTheme") { 
     tColor.innerHTML = "<option><-- Please select a T-shirt theme</option>"; 

    } else if(tSelection === "js puns") { 
     // If the user selects "Theme - JS Puns" then the color menu should only display "Cornflower Blue," "Dark Slate Grey," and "Gold." 
     tColor.innerHTML = "<option value='cornflowerblue'>Cornflower Blue</option><option value='darkslategrey'>Dark Slate Grey</option><option value='gold'>Gold</option>"; 

    } else if(tSelection === "heart js") { 
     // If the user selects "Theme - I ♥ JS" then the color menu should only display "Tomato," "Steel Blue," and "Dim Grey." 
     tColor.innerHTML = "<option value='tomato'>Tomato</option><option value='steelblue'>Steel Blue</option><option value='dimgrey'>Dim Grey</option>"; 
    } 
});