選択したすべてのセレクタオプションが削除されないのはなぜですか？

Question

私は対話形式で作業しています。

ユーザーは、「JS Puns」または「I love JS」という2つのデザインのtshirtを選択します。

合計6色のTシャツがあります。 'JS Puns'が選択されている場合、最初の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); 
    } 
}); 

任意の提案ですか？あなたは

Answer 1

オーケー、これは本当にくだらないですので、ありがとう...しかし、私はこのようにそれを固定：私はHTMLですべてのオプションを削除

が、余分に追加しました：私のJSで<option><-- Please select a T-shirt theme</option>

、次に、テーマ選択肢が選択されたことに基づいて、色選択フィールドのinnerHTMLをリセットします。

だから、このように見えました。さもなければ、nnnnnnが私がそれらを削除した場合、私は何とかそれらを取り出して一時変数として保存しなければならないので、後で再入力することができます。

ここにあります。あなた `.remove（0）`場合はその要素あなたはインデックス '0'で、その後だと思いますか、

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