KEMPZOR,
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег SELECT</title>
<style>
.cat {display:none}
ul.cat {
margin: 0;
padding: 4px;
}
ul.cat li {
display: inline;
margin-right: 5px;
padding: 3px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#cat1").css("display", "block");
$(".material-select").on("change", function () {
$(".cat").css("display", "none");
var id = "#cat" + $(this).val();
$(id).css("display", "block");
$("#res").html("");
});
$("li").on("click", function () {
$("#res").html($(this).html());
});
});
</script>
</head>
<body >
<select class="material-select">
<option value="1" selected="selected">1 Категория</option>
<option value="2">2 Категория</option>
</select>
<ul id = "cat1" class="cat">
<li value="1"><img src="http://javascript.ru/cat/list/appscript.png" /></li>
<li value="2"><img src="http://javascript.ru/cat/list/dom.gif" /></li>
<li value="3"><img src="http://javascript.ru/cat/list/event.gif" /></li>
<li value="4"><img src="http://javascript.ru/cat/list/integr.jpg" /></li>
<li value="5"><img src="http://javascript.ru/cat/list/donkey.gif" /></li>
</ul>
<ul id = "cat2" class="cat">
<li value="1"><img src="http://javascript.ru/cat/list/libs.jpg" /></li>
<li value="2"><img src="http://javascript.ru/cat/list/mobile.jpg" /></li>
<li value="3"><img src="http://javascript.ru/cat/list/learn.gif" /></li>
<li value="4"><img src="http://javascript.ru/cat/list/js.gif" /></li>
<li value="5"><img src="http://javascript.ru/cat/list/nodejs.png" /></li>
</ul>
<div id="res"></div>
</body>
</html>