Показать сообщение отдельно
  #5 (permalink)  
Старый 01.04.2013, 05:17
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Можно так, как самый простой вариант:
<select>
    <option value="" selected></option>
    <option value="a">пункт i</option>
    <option value="b">пункт b</option>
    <option value="c">пункт c</option>
</select>
<select>
    <option value="" selected></option>
    <option value="1">пункт а</option>
    <option value="2">пункт б</option>
    <option value="3">пункт в</option>
</select>

<div id="items">
    <div class="a 1">текст1 текст1 текст1 текст1</div>
    <div class="b 2">текст2 текст2 текст2 текст2</div>
    <div class="c 3">текст3 текст3 текст3 текст3</div>
    <div class="a 3">текст4 текст4 текст4 текст4</div>
    <div class="b 3">текст5 текст5 текст5 текст5</div>
    <div class="c 1">текст6 текст6 текст6 текст6</div>
    <div class="a 2">текст7 текст7 текст7 текст7</div>
</div>
<script>
(function(){
    var selects = document.getElementsByTagName('select');
    var items = document.getElementById('items').children;
    function filter(a, b) {
        var i, classes, matches;
        for (i = 0; i < items.length; i++) {
            classes = items[i].className.split(' ');
            matches = (!a || classes[0] == a) && (!b || classes[1] == b)
            items[i].style.display = matches ? '' : 'none';
        }
    }
    selects[0].onchange = selects[1].onchange = function() {
        filter(selects[0].value, selects[1].value);
    }
})()
</script>
Ответить с цитированием