Question

我正在制作互动表格。

用户可以选择两种T恤设计：'JS Puns'或'我爱JS'。

总共有6种颜色的T恤。如果选择“JS Puns”，则只能选择前3种颜色。反之亦然，如果选择'我爱JS'作为设计，那么将只选择最后3种颜色。具体而言，在颜色选择框中只能看到可用的颜色。

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

以下是我正在使用的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);
    }
});

有什么建议吗？谢谢

Answer 1

好的，这真的很糟糕......但我修好了这个：

我删除了HTML中的所有选项，但添加了额外的内容：<input type="email" name="input" ng-model="text" ng-change="validateEmail()"> <span ng-show="isValidEmail" class="error">Invalid email address. Please re-enter your email address.</span> <button type="submit" class="btn btn-default btn-primary btn-shaded ng-scope" ng-disabled="isValidEmail" translate="">Send Invite</button>

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

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

所以在这里。

请告诉我如何改善这一点：

<option><-- Please select a T-shirt theme</option>

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

1 个答案: