Help with working with option elements in a dropdown

JavaScript
1

Hello,
I’m using plain JavaScript to show only the three shirt options (“Cornflower Blue, Dark Slate Grey, and Gold”) when Theme - JS Puns option is selected in the first select option and same for Theme - I Love JS which will show ('Tomato, Steel Blue and Dim Grey).

first
first856×198 9.38 KB

But when I select the Theme - I Love JS the “Cornflower Blue” appears in the dropdown with the Theme - I Love JS options. The image below shows what I mean.

second
second931×196 9.42 KB

Below is the markup:
HTML

 <fieldset class="shirt">
      <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="categories">
          <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>       
</fieldset>

JAVASCRIPT

design.addEventListener('change', (e) => { 
    const color = document.getElementById('color'); //gets the select element with id "#color"

    if (e.target.value == 'js puns') {
        for (let i = 0; i < color.children.length; i++) {
            if (color.children[i].index <=2) { //if the option index is less than or equal to 2
                color.children[i].classList.add('active');
            } else {
                color.children[i].classList.remove('active');
                color.children[i].classList.add('none');
            }
        }

    }
    if (e.target.value == 'heart js') {
        for (let i = 0; i < color.children.length; i++) {
            if (color.children[i].index >= 3) { //if the option index is greater than or equal to 3
                color.children[i].classList.add('active');
            } else {
                color.children[i].classList.remove('active');
                color.children[i].classList.add('none'); 
            }
        }
    }
      
});

CSS

.none {
	display: none;
}

.active {
	display: block;
}
2

I don’t know if this is the way but it always returns to Select Color if user changes themes. (only tested in chrome browser)

You might be able to also do something similar on the first drop down to deter user from selecting Select Theme as a valid option.

Like your existing code, I relied on index to determine which options matched the selected theme. You might also consider using data- attributes to associate colors with themes or possibly loading colors from an array associated with the selected theme.

1 Like
4

Thanks for your contribution. I was able to figure it out by doing some small modifications with your code. I added a new select option ‘Please Select a Theme’ as the first option in the color select element and I also used color.selectedIndex to also help to display the color based on the theme selected.
This is a Codepen link to show what I mean. Thanks!

1 Like
5

You’re welcome. I kind of accidentally stumbled onto this. I can’t wait to use it now. I forked you codepen to save for when I need that

1 Like