JSFiddle - React, Tailwind, and code Playground

by Liad Idan

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>

JavaScript

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