下拉框過濾HTML中的元素

我想使用下拉框在div框中過濾我的文檔。我已經使用腳本給每個元素a或b，並保持隱藏。這個想法是顯示從下拉過濾器框中選擇的任何元素。下拉框過濾HTML中的元素

代碼：

<script> function toggleElement(id) { 
if(document.getElementById(id).style.display == 'none') 
{ 
    document.getElementById(id).style.display = ''; 
} 
else 
{ 
    document.getElementById(id).style.display = 'none'; 
} 
} 
</script> 

<div style="height:200px;width:895px; max-width:100%; border:1px solid #ccc;font:16px/26px;overflow:auto;"> 
<div id="a" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">A</a> <br></div> 
<div id="b" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">B</a> <br></div> 
<div id="a" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">A</a> <br></div> 
<div id="a" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">A</a> <br></div> 
<div id="b" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">B</a> <br></div> 
<div id="a" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">A</a> <br></div> 

</div> 

<div style="width:895px; max-width:100%; text-align:right;"> 
<form action="url"> 
<select name="View:"> 
<option value="All"><a href="javascript:toggleElement('a', 'b')">All</a></option> 
<option value="Tenant"><a href="javascript:toggleElement('a')">A</a></option> 
<option value="Landlord"><a href="javascript:toggleElement('b')">B</a></option> 
</select> 
</form> 
</div>

這裏是一個的jsfiddle與規範，如果它很容易想象：http://jsfiddle.net/Fn5qw/

來源

2014-03-13 user3219859

好第一關，你不能使用相同的ID在多個元素，比如你的div你做的標籤：

<div id="a" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">A</a> <br></div> 
<div id="b" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">B</a> <br></div> 
<div id="a" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">A</a> <br></div> 
<div id="a" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">A</a> <br></div> 
<div id="b" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">B</a> <br></div> 
<div id="a" style="display:none"><a href="/wp-content/uploads/2014/02/Updating-WP-Content.docx">A</a> <br></div>

嘗試使用類，而不是你可以引用多個元素到同一類。我已經對JSFiddle中的代碼進行了一些更改，以使其基於您的規範工作。讓我知道這是你在找什麼。

的jsfiddle：http://jsfiddle.net/Fn5qw/2/

來源

2014-03-13 19:59:23

WOW！這是我一直在努力做的一切，感謝您花了很多時間和精力爲我解決這個問題。只有一個額外的問題：我如何才能將所有默認設置爲可見，並且只在與下拉選擇無關時才隱藏？（一些提示就足夠了，我想嘗試自己弄清楚） – user3219859

@ user3219859如果你想默認顯示所有東西，只需在你的div標籤中更改/設置顯示屬性以顯示：'block'而不是'沒有'。這樣當頁面加載時它們全都可見，但用戶可以根據下拉列表選擇來篩選它們。 –

下拉框過濾HTML中的元素

回答

相關問題