複数のドロップダウンでオブジェクトをフィルタリングする

私は3つのクラスを持つたくさんのボタンがあります。第1のクラスは、「a1」、「a2」または「a3」とすることができる。第2のクラスは、「b1」、「b2」または「b3」とすることができる。 "c"の3番目のクラスと同じです。たとえば、次のように複数のドロップダウンでオブジェクトをフィルタリングする

<body> 
<button type="button" class="a1 b3 c3">Button 1</button> 
<button type="button" class="a1 b3 c1">Button 2</button> 
<button type="button" class="a2 b2 c2">Button 3</button> 
<button type="button" class="a3 b1 c3">Button 4</button> 
</body>

私は何をしたいことはフィッティングのクラスは、クラスの種類ごとに、ドロップダウンメニューで選択されている場合、それらにのみ表示させることにより、これらのボタンをフィルタリングすることである。

<select name="a"> 
    <option>all</option> 
    <option>a1</option> 
    <option>a2</option> 
    <option>a3</option> 
</select> 

<select name="b"> 
    <option>all</option> 
    <option>b1</option> 
    <option>b2</option> 
    <option>b3</option> 
</select> 

<select name="c"> 
    <option>all</option> 
    <option>c1</option> 
    <option>c2</option> 
    <option>c3</option> 
</select>

たとえば、ドロップダウンメニューで「a1」とb「b3」とc「all」が選択されている場合は、ボタン1とボタン2が表示されます。ドロップダウンメニューで「a1」が選択されている場合、メニューbには「all」と「b3」のみが表示されます。

ありがとうございました

出典

2017-08-09 offscourings

：ここ

しかしが可能なソリューションですか？そのためには、['document.querySelectorAll']（https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll）を使用してください。あなたの答えは – lumio

ありがとう。私はこれまでのところ適切な解決策を見つけられなかったので、何も試していませんでした。私はjavascriptで働いていないし、HTML/CSSのオプションがあることを期待しています。だから私は今、javascriptを見ていなければならないと思う;） – offscourings

よろしくお願いします。そこで、各ボタンにグループクラスを追加して、特定のグループを簡単に選択できるようにしました。グループクラスを終了する場合は、allフィルタの別のアルゴリズムが必要です。あなたがこれまでに試してみました何

// Define default filters 
 
const filters = { 
 
    a: 'all', 
 
    b: 'all', 
 
    c: 'all', 
 
}; 
 

 
function filterButtons() { 
 
    // Hide all buttons for now 
 
    setDisplay(document.querySelectorAll('button'), 'none'); 
 
    
 
    // Iterate over filters 
 
    Object.keys(filters).forEach(key => { 
 
    const className = filters[ key ]; 
 
    // Determine to show all buttons of a certain group or just a certain class 
 
    let selector = className === 'all' ? key : className; 
 
    setDisplay(document.querySelectorAll(`.${ selector }`), 'inline'); 
 
    }); 
 
} 
 

 
// Helper function to set display style on a HTMLCollection 
 
function setDisplay(collection, display) { 
 
    [ ...collection ].forEach(button => button.style.display = display); 
 
} 
 

 
// Adding eventListeners so we recognize changes 
 
[ ...document.querySelectorAll('select') ].forEach(selector => { 
 
    selector.addEventListener('change', (event) => { 
 
    // Set filters on dropdown change 
 
    filters[ event.target.name ] = event.target.value; 
 
    // Filter buttons on change 
 
    filterButtons(); 
 
    }); 
 
});

<div> 
 
    <select name="a"> 
 
    <option>all</option> 
 
    <option>a1</option> 
 
    <option>a2</option> 
 
    <option>a3</option> 
 
    </select> 
 

 
    <select name="b"> 
 
    <option>all</option> 
 
    <option>b1</option> 
 
    <option>b2</option> 
 
    <option>b3</option> 
 
    </select> 
 

 
    <select name="c"> 
 
    <option>all</option> 
 
    <option>c1</option> 
 
    <option>c2</option> 
 
    <option>c3</option> 
 
    </select> 
 
</div> 
 

 
<div> 
 
    <!-- I added the base class so it would be easier to select all of a certain group --> 
 
    <button type="button" class="a b c a1 b3 c3">Button 1</button> 
 
    <button type="button" class="a b c a1 b3 c1">Button 2</button> 
 
    <button type="button" class="a b c a2 b2 c2">Button 3</button> 
 
    <button type="button" class="a b c a3 b1 c3">Button 4</button> 
 
</div>

出典

2017-08-09 13:06:02 lumio

大丈夫だよ、それは私を助けてくれた！たぶん私は間違って表現した、私はと条件の代わりに、条件とフィルタの間にしたい。たとえば、「a2」、「b3」、「c3」を選択した場合、ボタンにはこれらの3つのクラスがないため、何も表示されません – offscourings

複数のドロップダウンでオブジェクトをフィルタリングする

答えて

関連する問題