为什么我选择的所有选择器选项都没有被删除？

Question

我正在制作一个交互式表单。

用户将在两种 T 恤设计之间进行选择：“JS Puns”或“I love JS”。

T 恤共有 6 种颜色。如果选择了“JS Puns”，则只有前 3 种颜色可供选择。反之亦然，如果选择“我爱 JS”作为设计，则只会选择最后 3 种颜色。具体来说，颜色选择框中只会显示可用的颜色。

由于某种原因，我可以删除 1 或 2 种颜色，但无法删除所有必要的 3 种颜色。

这是我正在使用的 HTML 的 sn-p：

<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>  

这里是 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);
    }
});

有什么建议吗？谢谢

Answer 1

好吧，这真的很糟糕......但我把它修好了：

我删除了 HTML 中的所有选项，但添加了一个额外的选项：<option><-- Please select a T-shirt theme</option>

在我的 JS 中，然后我根据选择的主题选项重置颜色选择字段的 innerHTML。

所以它看起来像这样。否则，正如 nnnnnn 所暗示的那样，如果我删除它们，我将不得不以某种方式将它们取出并将它们存储为临时变量，以便稍后我可以再次重新输入它们。

原来如此。

请告诉我如何改进：

// 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>";
    }
});