通過多個下拉列表過濾對象

我有很多按鈕，每個按鈕都有三個類。第一類可以是「a1」，「a2」或「a3」。第二類可以是「b1」，「b2」或「b3」。與「c」相同的第三課。例如：通過多個下拉列表過濾對象

<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「全部」，則應可見按鈕1和按鈕2。另一點是，如果在下拉菜單中選擇了「a1」，則在菜單b中應該只顯示「全部」和「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」，則不應顯示任何內容，因爲沒有按鈕具有這三個類 – offscourings

通過多個下拉列表過濾對象

回答

相關問題