title: Showing certain values within two select menus
body: <p>I want to use vanilla JavaScript.  </p>
  
  <p>if "js puns" is selected, hide the three "heart js" option elements in the "color" drop down menu, show the three "js puns" option elements, and update the "color" field to the first available color.</p>
  
  <p>if "heart js" is selected, hide the three "js puns" option elements in the "color" drop down menu, show the three "heart js" option elements, and update the "color" field to the first available color.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const select = document.getElementById('title');
  let textField = document.getElementById('other-title').style.display = "none";  
  const theme = document.getElementById('design');
  const themeChi = document.getElementById('design').children;
  const color = document.getElementById('color');
  const colorElement = document.createElement('option');
  const colorChi = document.getElementById('color').children;
  //
  //
  // trying to show colors based on #design selection
  theme.addEventListener("change", function() {
      for (let i = 0; i &lt; theme.length; i ++){
          if (theme[i] === 1){
              colorChi.style.display="block";
          }
      }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;fieldset class="shirt"&gt;
          &lt;legend&gt;T-Shirt Info&lt;/legend&gt;
          
          &lt;div class="shirt-box"&gt;
            &lt;div&gt;
              &lt;label for="size"&gt;Size:&lt;/label&gt;
              &lt;select id="size" name="user-size"&gt;
                &lt;option value="small"&gt;S&lt;/option&gt;
                &lt;option value="medium" selected&gt;M&lt;/option&gt;
                &lt;option value="large"&gt;L&lt;/option&gt;
                &lt;option value="extra large"&gt;XL&lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;
  
            &lt;div&gt;
              &lt;label for="design"&gt;Design:&lt;/label&gt;
              &lt;select id="design" name="user-design"&gt;
                &lt;option&gt;Select Theme&lt;/option&gt;
                &lt;option value="js puns"&gt;Theme - JS Puns&lt;/option&gt;
                &lt;option value="heart js"&gt;Theme - I &amp;#9829; JS&lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;
  
            &lt;div id="colors-js-puns" class=""&gt;
              &lt;label for="color"&gt;Color:&lt;/label&gt;
              &lt;select id="color"&gt;
                &lt;option value="cornflowerblue"&gt;Cornflower Blue (JS Puns shirt only)&lt;/option&gt;
                &lt;option value="darkslategrey"&gt;Dark Slate Grey (JS Puns shirt only)&lt;/option&gt; 
                &lt;option value="gold"&gt;Gold (JS Puns shirt only)&lt;/option&gt; 
                &lt;option value="tomato"&gt;Tomato (I &amp;#9829; JS shirt only)&lt;/option&gt;
                &lt;option value="steelblue"&gt;Steel Blue (I &amp;#9829; JS shirt only)&lt;/option&gt; 
                &lt;option value="dimgrey"&gt;Dim Grey (I &amp;#9829; JS shirt only)&lt;/option&gt; 
              &lt;/select&gt;
            &lt;/div&gt;
          &lt;/div&gt;               
        &lt;/fieldset&gt;</code></pre>
  </div>
  </div>
  </p>