JQueryドロップダウンリストを使用して要素を検索する

Question

条件以外のドロップダウンリストで何かを選択すると、その要素のすべての要素が検索されて表示されます。

私のjQuery：

$('#searchbtn').click(function(){ 
    var e = document.getElementById("condition"); 
    var strUser = e.options[e.selectedIndex].value; 

    $('.item').each(function(){ 
    var itemcondition = $('.condition').html(); 
    if (itemcondition === strUser.toLowerCase()){ 
     $(this).show(); 
    } 
    if (itemcondition !== strUser.toLowerCase()){ 
     $(this).hide(); 
    } 
    }); 

}) 

私のhtml：ここ

<div class="item" data-keywords="m4a4 howl"> 
    <div class="name">M4A4 Howl</div> 
    <div class="condition">Factory New</div> 
    <div class="price">800 000 coins</div> 
    <button>Buy</button> 
</div> 

Answer 1

あなたはそれを修正する方法である。

<select id="condition"> 
    <option>Condition</option> 
    <option value="factory new">Factory New</option> 
    <option value="minimal wear">Minimal Wear</option> 
    <option value="field tested">Field Tested</option> 
    <option value="well worn">Well Worn</option> 
    <option value="battle scarred">Battle Scarred</option> 
</select> 

これは、要素がどのように見えるかです。 html属性とjavascriptコードを変更する必要があります。あなたの製品の状態のID /スラッグでオプション値を与える必要があります - 次のステップでこのデータを簡単に管理するためにスペースがあってはなりません。

<select id="condition"> 
    <option>Condition</option> 
    <option value="factory-new">Factory New</option> 
    <option value="minimal-wear">Minimal Wear</option> 
    <option value="field-tested">Field Tested</option> 
    <option value="well-worn">Well Worn</option> 
    <option value="battle-scarred">Battle Scarred</option> 
</select> 

あなたの商品リストは、このように選択したオプション値に対応するクラスである必要があります。

<div class="item factory-new field-tested" data-keywords="m4a4 howl"> 
    <div class="name">M4A4 Howl</div> 
    <div class="condition">Factory New</div> 
    <div class="price">800 000 coins</div> 
    <button>Buy</button> 
</div> 

あなたのjavascriptはほぼ完全に変更する必要があります。理解するのがずっと簡単です。

$('#searchbtn').click(function() { 
    var $condition = $("#condition"); 
    var condition = $condition.val(); 
    $('.item').hide(); 
    $('.item.' + condition).show(); 
}) 

希望します。