Javascript 通过另一个选择框更改选择框选项和选项文本

我得到了两个选择框的HTML表单，一个用于设计，一个用于颜色。 我需要颜色选项显示所选的设计选项，此外，我需要清理颜色选项文本。 最重要的是，HTML不应该改变。 我设法做到了，但只做了一次。innetText中的colorOption不断变化，尽管我正在将他的元素推到另一个数组中

HTML

JS

---

这里的主要问题是color div innerHTML在更改时被擦除。发生这种情况时，将丢失颜色的完整数据列表。我通过手动指定一个新的colorOptionsValues对象并从中填充颜色选择框来解决这个问题。请参阅我的代码片段：

var sanitizest=functionstr{ var regex=/\+.+\/； var substr=str.matchregex； str=str.replace''+substr； 返回str； }; 变量colorOptionsValues={ 矢车菊蓝：矢车菊蓝JS双关T恤， 深灰色：仅限深灰色JS双关T恤， 金色：仅限金色JS双关T恤， 番茄：番茄I♥ 仅限JS衬衫， 钢蓝：钢蓝I♥ 仅限JS衬衫， 暗灰色：暗灰色I♥ 仅限JS衬衫 }; var getTshirtDesign=函数{ var design=document.getElementById'design'； var colorDiv=document.getElementById'colors-js-puns'； var color=document.getElementById'color'； var colorpoptions=document.queryselectoral'colorpoption'； var显示； //隐藏颜色标签并选择 colorDiv.style.display='none'； design.onchange=函数{ 显示=[]； color.innerHTML=； 如果this.value==“选择主题”{ colorDiv.style.display='none'； }否则{ colorDiv.style.display='block'； //查找包含部分选定选项文本的colorOptions元素，并将其推送到显示 对于var，请在colorOptionsValues中键入{ 如果颜色选项Values.hasOwnPropertykey{ 如果颜色选项值[key].indexOfthis.selectedOptions[0].text.substr8>-1{ 显示。按键； } } } //控制台。日志显示； //清理显示元素的内部文本并将其附加到颜色 对于i=0；i非常感谢。它解决了这个问题，我想我也可以检查设计值并根据它们的值附加颜色选项，但我没有这样做的主要原因是如果将来颜色选择框将包含100多个选项怎么办？我试图理解为什么在我更改显示元素innerText时，colorOptions元素innerText正在更改。当我使用push方法时，它不是创建了一个将对象复制到显示数组的副本吗？@LiadIdan我添加了另一个代码段，该代码段具有一个更健壮的解决方案，可以迭代颜色选项并生成数据对象。现在选择框中是否有6个或100个选项无关紧要。

<form action="index.html" method="post">
  <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>       
</form>

var sanitizeStr = function(str) {
    var regex = /\(+.+\)/;
    var substr = str.match(regex);
    str = str.replace(' ' + substr, '');
    return str;
};

var getTshirtDesign = function() {
    var design = document.getElementById('design');
    var colorDiv = document.getElementById('colors-js-puns');
    var color = document.getElementById('color');
    var colorOptions = document.querySelectorAll('#color option');
    var display;
    // Hide color label and select
    colorDiv.style.display = 'none';
    console.log(colorOptions);
    design.onchange = function() {
        console.log(colorOptions);
        display = [];
        color.innerHTML = '';
        if (this.value === 'Select Theme') {
            colorDiv.style.display = 'none';
        } else {
            colorDiv.style.display = 'block';
            // Finds the colorOptions elements that contains part of the selected option text and push them to display
            for (var i = 0; i < colorOptions.length; i++) {
                if (colorOptions[i].innerText.indexOf(this.selectedOptions[0].text.substr(8)) > -1) {
                    display.push(colorOptions[i]);
                }
            }
            // Sanitize the innerText of the display elements and append them to color
            for (i = 0; i < display.length; i++) {
                display[i].innerText = sanitizeStr(display[i].innerText);
                color.appendChild(display[i]);
            }
        }
    };
};
getTshirtDesign();