Раскрывающийся список для фильтрации элементов в HTML

Question

Раскрывающийся список для фильтрации элементов в HTML

0

Я хочу использовать раскрывающийся список для фильтрации моих документов в поле div. Я использовал скрипты, чтобы дать каждому элементу a или b и сохранить его скрытым. Идея состоит в том, чтобы показать любой элемент, выбранный из окна фильтра выпадающего списка.

код:

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

user3219859 13 март 2014, в 21:00

Источник

Теги:

javascript

html

filter

1 ответ

Ещё вопросы

Prakash Chennupati · Accepted Answer · 2014-03-13T18-48-00.000Z

ну во-первых, вы не можете использовать один и тот же идентификатор в нескольких элементах, например, с вашими тегами 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/

ВАУ! это все, что я пытался сделать, спасибо, что уделили мне столько времени и усилий, чтобы исправить это для меня. только один дополнительный вопрос: как я могу сделать все по умолчанию видимым и скрыть его, только если он не имеет отношения к выпадающему списку? (несколько подсказок достаточно, я хочу попытаться выяснить это сам)
@ user3219859, если вы хотите сделать все видимым по умолчанию, просто измените / установите атрибут отображения в тегах div, чтобы он отображал «block» вместо «none». таким образом, они все будут видны при загрузке страницы, но у пользователя есть возможность отфильтровать их по выбору из выпадающего списка.