jQuery - отображение содержимого из меню выбора (более общий подход)

Question

Я видел похожие решения здесь, но они слишком специфичны. Мой случай требует более общего подхода к решению. В основном что-то, что можно использовать повторно, независимо от классов, используемых при отображении DIV.

Боковое примечание: я не слишком хорош jQuery или JavaScript, работая над ним.

Мой HTML код

<select name="business-law" id="business-law" class="filter"> 
    <option value="view-all">&mdash; View All</option> 
    <option value="firm-name">Firm name 1</option> 
    <option value="other-firm">Firm name 2</option> 
    <option value="another-one">Firm name 3</option> 
    <option value="final-firm-name">Firm name 4</option> 
</select> 

<div class="firm-name">Author 1 info</div> 
<div class="firm-name">Author 2 info</div> 
<div class="other-firm">Author 3 info</div> 
<div class="another-one">Author 4 info</div> 
<div class="final-firm-name">Author 5 info</div> 
<div class="final-firm-name">Author 6 info</div> 

Мой случай

Я строю страницу, где перечислены юридической фирмы авторов. В списке много авторов, и многие из них принадлежат к одной и той же юридической фирме.

Моя проблема

Поскольку страница может иметь много авторов, мне нужно реализовать функцию «фильтра». Фильтр будет фильтроваться фирмой. Таким образом, посетитель выбирает одну из фирм из меню выбора, и должны отображаться только авторы, которые работают для этой фирмы. Остальные должны скрываться.

Существует также опция «Просмотреть все», это, очевидно, покажет каждого автора на странице. Это опция по умолчанию.

Мой вопрос

Любая идея, как сделать это с кода, который многоразовые в подобных случаях? (Возможно, чтобы отфильтровать страны, языки или фрукты, вы знаете, что я имею в виду).

Рассматривая другие решения здесь, я нашел this one, но это слишком специфично для его случая. Это также немного над моей головой, поэтому я не знаю, как приспособить его к этому делу.

Заранее спасибо.

Answer 1

Другие решения правильны-иш, но они оставляют вне «посмотреть все»:

$('#business-law').on('change', function() { 
    if ($(this).val() == 'view-all') { 
     $('div').show(); 
    } else { 
     $('div').hide(); 
     $('.' + $(this).val()).show(); 
    } 
}); 

Answer 2

Как о чем-то вроде этого:

$('.filter').on('change',function(){ 
    if($(this).val()=='view-all'){ 
     $('div').show(); 
    }else{ 
     $('div').hide(); 
     $('.'+$(this).val()).show(); 
    } 
}); 

Вот Fiddle: http://jsfiddle.net/MHPPE/

Answer 3

$('.filter').on('change',function(e){ 
    var val = $(this).val(); 
    $('.'+val).show(); 
}); 

Это покажет какие-либо элементы с именем класса, соответствующего атрибута значение выбранного опциона.

Answer 4

Как насчет этого?

http://jsfiddle.net/4PsTM/

<select name="business-law" id="business-law" class="filter"> 
    <option value="view-all">&mdash; View All</option> 
    <option value="firm-name">Firm name 1</option> 
    <option value="other-firm">Firm name 2</option> 
    <option value="another-one">Firm name 3</option> 
    <option value="final-firm-name">Firm name 4</option> 
</select> 

<div class="firms"> 
<div class="firm-name">Author 1 info</div> 
<div class="firm-name">Author 2 info</div> 
<div class="other-firm">Author 3 info</div> 
<div class="another-one">Author 4 info</div> 
<div class="final-firm-name">Author 5 info</div> 
<div class="final-firm-name">Author 6 info</div> 
</div>​ 

С помощью этого Javascript:

$("#business-law").change(
    function() 
    { 
     var selected = $(this).val(); 
     if (selected == 'view-all') { 
      $('.firms').children().show(); 
     } 
     else { 
      $('.firms .'+selected).show(); 
      $('.firms :not(.'+selected+')').hide(); 
     } 
    });​