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

Why aren't all my chosen selector options being removed?

本文关键字：删除 选项 选择器 选择 为什么      更新时间：2023-09-26

我正在做一个交互式表单。

用户将在两种t恤设计中选择:"JS双关语"或"我爱JS"。

t恤共有6种颜色。如果选择了"JS双关语"，那么只有前3种颜色可以选择。反之亦然，如果"我爱JS"被选为设计，那么只会选择最后3种颜色。具体来说，只有可用的颜色才会在颜色选择框中显示。

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

下面是我正在使用的HTML代码片段:

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

有什么建议吗?谢谢你

好吧，这真的很糟糕…但是我像这样修改了它:

我删除了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>";
    }
});
相关文章：