Question

我得到了带有2个选择框的HTML表单，一个用于设计，一个用于颜色。我需要通过选定的设计选项显示颜色选项，此外我还需要清理颜色选项文本。最重要的是 - HTML不应该被改变。我设法做到了，但它只能工作一次。尽管我将他的元素推送到另一个数组，但是colorOption innetText仍在不断变化。

HTML

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

JS

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

JSFiddle

Answer 1

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

＆＃13;

var sanitizeStr = function(str) {
    var regex = /\(+.+\)/;
    var substr = str.match(regex);
    str = str.replace(' ' + substr, '');
    return str;
};

var colorOptionsValues = {
  "cornflowerblue" : "Cornflower Blue (JS Puns shirt only)", 
  "darkslategrey" : "Dark Slate Grey (JS Puns shirt only)", 
  "gold" : "Gold (JS Puns shirt only)", 
  "tomato" : "Tomato (I ♥ JS shirt only)", 
  "steelblue" : "Steel Blue (I ♥ JS shirt only)", 
  "dimgrey" : "Dim Grey (I ♥ JS shirt only)"
};

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';
    design.onchange = function() {
        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 key in colorOptionsValues) {
            if (colorOptionsValues.hasOwnProperty(key)) {
              if (colorOptionsValues[key].indexOf(this.selectedOptions[0].text.substr(8)) > -1) { 
                
                    display.push(key);
              }
            }
           }
          //console.log(display);
            // Sanitize the innerText of the display elements and append them to color
            for (i = 0; i < display.length; i++) {
                var sanitizedValue = sanitizeStr(colorOptionsValues[display[i]]);
              var optionNode = document.createElement("OPTION");
              optionNode.value = display[i];
              optionNode.text = sanitizedValue;
              color.appendChild(optionNode);
            }
        }
    };

};

getTshirtDesign();

＆＃13;

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

＆＃13;

选项2

＆＃13;

var sanitizeStr = function(str) {
    var regex = /\(+.+\)/;
    var substr = str.match(regex);
    str = str.replace(' ' + substr, '');
    return str;
};

var colorOptions = document.querySelectorAll('#color option');
var colorOptionsValues = {};
function initializeColors(){
  for (i = 0; i < colorOptions.length; ++i) {
    colorOptionsValues[colorOptions[i].value] = colorOptions[i].text;
  }
}

var getTshirtDesign = function() {
    var design = document.getElementById('design');
    var colorDiv = document.getElementById('colors-js-puns');
    var color = document.getElementById('color');
    var display;
    // Hide color label and select
    colorDiv.style.display = 'none';
    design.onchange = function() {
        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 key in colorOptionsValues) {
            if (colorOptionsValues.hasOwnProperty(key)) {
              if (colorOptionsValues[key].indexOf(this.selectedOptions[0].text.substr(8)) > -1) { 
                
                 display.push(key);
              }
            }
           }
          //console.log(display);
            // Sanitize the innerText of the display elements and append them to color
            for (i = 0; i < display.length; i++) {
                var sanitizedValue = sanitizeStr(colorOptionsValues[display[i]]);
              var optionNode = document.createElement("OPTION");
              optionNode.value = display[i];
              optionNode.text = sanitizedValue;
              color.appendChild(optionNode);
            }
        }
    };

};

initializeColors();
getTshirtDesign();

＆＃13;

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

＆＃13;

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

1 个答案: