How to modify a html select to display all options with matching data attribute?

Question

I have a html select drop-down listing various cats, each with a data attribute of "color", an associated color, and a button next to the drop-down.

Using pure javascript, I want to be able to click the button, get the "color" attribute of the selected cat, and have the list display all cats with the same color attribute. Example: I've selected Cat 1 who has a color attribute of "black", I click the button and the drop down displays Cats 1, 3 and 4 as options.

Would I need to implement a for loop, or would for/in statement work?

 function filter() { //onclick modifies the "catList" select to display all cats with the same data-color attribute. var list = document.getElementByID("catList"); }; 

 <form> <select id="catList"> <option data-color="black">Cat 1</option> <option data-color="orange">Cat 2</option> <option data-color="black">Cat 3</option> <option data-color="black">Cat 4</option> <option data-color="orange">Cat 5</option> </select> </form> <button type="button" id="btn" class="menu" onclick="filter()">Filter Cats</button> 

Answer 1

Loop over the option list, and add display none, to options that don't have the same data attribute value as with the selected option.

Option 1 (this will hide the other options, and you won't be able to select them, until you refresh the page)

 function filter() { //onclick modifies the "catList" select to display all cats with the same data-color attribute. var list = document.getElementById("catList"); var option = list.options[list.selectedIndex] list.querySelectorAll('[data-color]').forEach(function (element) { if (option.getAttribute('data-color') !== element.getAttribute('data-color')) { element.classList.add('filter'); } }) }; 

 .filter { display: none; } 

 <form> <select id="catList"> <option data-color="black">Cat 1</option> <option data-color="orange">Cat 2</option> <option data-color="black">Cat 3</option> <option data-color="black">Cat 4</option> <option data-color="orange">Cat 5</option> </select> </form> <button type="button" id="btn" class="menu" onclick="filter()">Filter Cats</button> 

Option 2

 function filter() { //onclick modifies the "catList" select to display all cats with the same data-color attribute. var list = document.getElementById("catList"); var color_filter = document.getElementById("color"); var value = color_filter.options[color_filter.selectedIndex].value; list.querySelectorAll('[data-color]').forEach(function (element) { if (value !== element.getAttribute('data-color')) { element.classList.add('filter'); }else { element.classList.remove('filter'); } }); }; 

 .filter { display: none; } 

 <select id="color" onchange="filter()"> <option value="">Select filter</option> <option value="black">Black</option> <option value="orange">Orange</option> </select> <select id="catList"> <option data-color="black">Cat 1</option> <option data-color="orange">Cat 2</option> <option data-color="black">Cat 3</option> <option data-color="black">Cat 4</option> <option data-color="orange">Cat 5</option> </select> 

Answer 2

You can try by this way

HTML

<form>
  <select id="catList">
      <option data-color="black">Cat 1</option>
      <option data-color="orange">Cat 2</option>
      <option data-color="black">Cat 3</option>
      <option data-color="black">Cat 4</option>
      <option data-color="orange">Cat 5</option>
      <option data-color="black">Cat 6</option>
   </select>
</form>

<button type="button" id="btn" class="menu" onclick="filter()">Filter Cats</button>

JS

         window.filter = function () {
            var action_list = document.getElementById("catList");
            var selected_color = action_list.options[action_list.selectedIndex].getAttribute("data-color");

            for (var i = action_list.options.length - 1; i >= 0; i--) {
                if (action_list.options[i].getAttribute("data-color") != selected_color) {
                    action_list.remove(i);
                }
            } 
        };

Solution 1. see live demo here jsfiddle

Solution 2. see live demo here jsfiddle