Показать сообщение отдельно
  #2 (permalink)  
Старый 19.12.2016, 11:28
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

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>
Ответить с цитированием