Как делают "Пары" селектов. Вообще элементарно.
<ul>
<li id="col">Цвет</li>
<li id="shp">Форма</li>
<li id="pat">Дизайн</li>
<li id="mat">Материал</li>
</ul>
Стилями каждый раздел оформляется красиво, на корень, на <ul> вешается листенер и вперде. Юзер жмет, скрипт находит цель, берет id, делает запрос на сервер, с сервера приходят опции, unordered список которых рендерится внутри цели.
Можно сразу все отрендерить, а с сервера получать лишь возможные варианты выбора данной опции в условиях предыдущего выбора и просто дизаблить то, что выбрать нельзя.
На огромном числе сайтов фильтры товарных характеристик устроены именно так, или в основе своей так, но Шурик не таков. Чтобы не маяться с хтмлем, он нахерачит 24 одинаковых селекта и будет мараковать как обмануть природу.