Сортировка div на jquery

[werty1001]

Здравствуйте всем, перерыл весь интернет, но подобной сортировки не нашел. Все которые удалось найти работают очень криво или вообще не работают. Есть код

<select id="ids">
            <option value="#" selected>все</option>
            <option value="id1" >id1</option>
            <option value="id2" >id2</option>
            <option value="id3" >id3</option>
            <option value="id4" >id4</option>
            </select>
        
        <select id="langs">
        <option value="#" selected>все</option>
        <option value="lang1" >lang1</option>
        <option value="lang2" >lang2</option>
        <option value="lang3" >lang3</option>
        <option value="lang4" >lang4</option>
        </select>
        
        <select id="procs">
        <option value="#" selected>все</option>
        <option value="proc1" >proc1</option>
        <option value="proc2" >proc2</option>
        <option value="proc3" >proc3</option>
        <option value="proc4" >proc4</option>
        </select>
        
                    <div id='d-contents'>
                    
                    <div class="id1 lang3 proc2"> <a href="###" ><img src="###.jpg"/></a> <a href="###">Зоголовок</a> <div>текст</div></div>
                
                <div class="id2 lang2 proc4"> <a href="###" ><img src="###.jpg"/></a> <a href="###">Зоголовок</a> <div>текст</div></div>
                
                <div class="id3 lang1 proc4"> <a href="###" ><img src="###.jpg"/></a> <a href="###">Зоголовок</a> <div>текст</div></div>
    
    и еще сотня подобных дивов с разными параметрами в class...
                </div>

может кто подскажет как реализовать сортировку div элементов в зависимости от выбора select-ов, чтобы изначально на странице были все дивы, но если выбрать например в select id="ids" option value="id3" то на странице остались бы только те div в классе которых есть id3, думаю понятно, желательно, чтобы селекты не мешали друг другу. Если кто поможет , большое спасибо.

[Deff]

<script src="http://code.jquery.com/jquery-latest.js"></script>

<select class="selec" id="ids">
            <option value="#" selected>все</option>
            <option value="id1" >id1</option>
            <option value="id2" >id2</option>
            <option value="id3" >id3</option>
            <option value="id4" >id4</option>
            </select>
        
        <select class="selec" id="langs">
        <option value="#" selected>все</option>
        <option value="lang1" >lang1</option>
        <option value="lang2" >lang2</option>
        <option value="lang3" >lang3</option>
        <option value="lang4" >lang4</option>
        </select>
        
        <select  class="selec" id="procs">
        <option value="#" selected>все</option>
        <option value="proc1" >proc1</option>
        <option value="proc2" >proc2</option>
        <option value="proc3" >proc3</option>
        <option value="proc4" >proc4</option>
        </select>
        
                    <div id='d-contents'>
                    
                    <div class="id1 lang3 proc2"> <a href="###" ><img src="###.jpg"/></a> <a href="###">Заголовок</a> <div>текст</div></div>
                
                <div class="id2 lang2 proc4"> <a href="###" ><img src="###.jpg"/></a> <a href="###">Заголовок</a> <div>текст</div></div>
                
                <div class="id3 lang1 proc4"> <a href="###" ><img src="###.jpg"/></a> <a href="###">Заголовок</a> <div>текст</div></div>
    
    и еще сотня подобных дивов с разными параметрами в class...
                </div>

<script type="text/javascript">
var first=true;
  $("select.selec").change(function () {
       var a='';
     $("select.selec").each(function () {
       a+=$(this).val();
     });
     if(a=='###'){ 
        $("#d-contents > div").show();
        first=true;
        return false;
    }
    if(first){first=false; $("#d-contents > div").hide();}

    var a = $(this).val();

    $("#d-contents > div."+a).show();

});
</script>

[werty1001]

Deff, спасибо за помощь, но работает не корректно. Если выбрать id1 - на странице останется только он, но если затем выбрать id2 то на странице будет див и с id1 и id2 + если выбрать id1 а в другом селекте lang1 то на странице будут все дивы с lang1 и перестанет учитываться выбор id1 в первом селекте

[Deff]

werty1001,
Приведите несколько примеров типа:
вид селектора => вид выходных классов у div(ов)

[werty1001]

werty1001,
Приведите несколько примеров типа:
вид селектора => вид выходных классов у div(ов)

Не очень понял про что вы. На другом сайте посоветовали такой код

$('select').change(function(){
    var class_name = $(this).val();
    $('#d-contents div').each(function(){

    if($(this).hasClass(class_name))
        $(this).show();
    else
        $(this).hide();
   });
});

а чтобы исправить это

выбрать id1 а в другом селекте lang1 то на странице будут все дивы с lang1 и перестанет учитываться выбор id1 в первом селекте

посоветовали добавить значение селектов других к проверки классов

var class_name1 = $('#select1'/*выборка для нахождения нужных селектов*/).val()
...
var cass_name2 = ... 
...
if($(this).hasClass(class_name1) or     $(this).hasClass(class_name2))

но тк я в js ноль, может вы подскажите как будет выглядеть полный код