htmlを変更する方法は、一致するデータ属性を持つすべてのオプションを表示するかどうかを選択しますか？

Question

私は、データ属性が「色」で、関連する色があり、ドロップダウンの横にボタンがある、さまざまな猫をHTML選択ドロップダウンリストに表示しました。

純粋なjavascriptを使用して、ボタンをクリックして、選択した猫の「色」属性を取得し、リストに同じ色属性のすべての猫を表示できるようにします。 例：「黒」の色属性を持つCat 1を選択しました。ボタンをクリックするとドロップダウンでCats 1、3、4がオプションとして表示されます。

私はforループを実装する必要がありますか、/ inステートメントの作業には適していますか？

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

オプションリストをループし、選択したオプションと同じデータ属性値を持っていないオプションに、表示なしを追加しません。

オプション1（これは他のオプションを非表示になりますし、ページを更新するまでは、それらを選択することはできません）

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>

オプション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

あなたがこの方法で

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

ソリューション1.ここでライブデモを参照してくださいjsfiddle

ソリューション2.ライブデモを見ますここにjsfiddle