user3219859 user3219859 - 25 days ago 5
HTML Question

Dropdown box to filter elements in HTML

I want to use the dropdown box to filter my documents in a div box. I have used scripts to give each element either a or b, and kept it hidden. The idea is to show whatever element selected from the dropdown filter box.

code:

<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>


Here is a JSFiddle with the codes if it is easier to visualize: http://jsfiddle.net/Fn5qw/

Answer

well first off you cannot use the same id in multiple elements like your doing with your div tags:

<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>

trying using class instead you can reference multiple elements to the same class. I have made some changes to your code in JSFiddle to make it work based on your spec. let me know if this is what you are looking for.

JSFiddle: http://jsfiddle.net/Fn5qw/2/

Comments