[serhioses]

Есть хедер с селектами и есть блок со списком, который выводит все игры. Нужно написать фильтр на js (можно использовать jquery) который будет выводить игры в соответствии с выбранным пунктом селекта. Например: выбрали RPG - появились все RPG, добавили еще скажем платформу Android - вывелись все RPG но уже только на Android, добавили страну скажем Russia, теперь выводятся только RPG на Android из Russia. Ну и если мы возвращаем какую-то категорию в дефолтное состояние, скажем Country(all) то выводится уже только RPG + Android но со всех стран. Жанр, платформа и страна хранятся в data-game в элементах li. Подскажите как такое возможно сделать?

<header>
        <ul>
            <li>
                <select name="" id="genre">
                    <option value="">Genre(all)</option>
                    <option value="rpg">RPG</option>
                    <option value="shooter">Shooter</option>
                    <option value="strategy">Strategy</option>
                    <option value="action">Action</option>
                    <option value="arcade">Arcade</option>
                </select>
            </li>
            <li>
                <select name="" id="platform">
                    <option value="">Platform(all)</option>
                    <option value="pc">PC</option>
                    <option value="android">Android</option>
                    <option value="ps3">PS3</option>
                </select>
            </li>
            <li>
                <select name="" id="country">
                    <option value="">Country(all)</option>
                    <option value="usa">USA</option>
                    <option value="russia">Russia</option>
                    <option value="england">England</option>
                    <option value="ukraine">Ukraine</option>
                </select>
            </li>
        </ul>
    </header>
<section>
        <ul>
            <li data-game="g-rpg p-pc c-usa">
                <div class="img"></div>
                <p>World of Tanks</p>
            </li>
            <li data-game="g-shooter p-pc c-usa">
                <div class="img"></div>
                <p>Counter Strike</p>
            </li>
            <li class="n" data-game="g-strategy p-pc c-russia">
                <div class="img"></div>
                <p>Heroes of Might and Magic</p>
            </li>
            <li class="n" data-game="g-strategy p-pc c-england">
                <div class="img"></div>
                <p>Civilization</p>
            </li>
            <li class="n" data-game="g-shooter p-pc c-usa">
                <div class="img"></div>
                <p>Crysis</p>
            </li>
            <li class="n" data-game="g-arcade p-android c-ukraine">
                <div class="img"></div>
                <p>Boxes</p>
            </li>
            <li class="n" data-game="g-action p-ps3 c-usa">
                <div class="img"></div>
                <p>The last of us</p>
            </li>
        </ul>
    </section>