Javascript-форум - <select><option> список.

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - <select><option> список. (https://javascript.ru/forum/misc/66491-select-option-spisok.html)

<select><option> список.

Здравствуйте уважаемые. Помогите разобраться.
Есть простой выпадающий список с выбором категории.

<select class="material-select"><option selected="selected" value="1">1 Категория</option><option value="2">2 Категория</option><option value="3">3 Категория</option><option value="4">4 Категория</option><option value="5">5 Категория</option><option value="3">6 Фотопечать</option> </select>

Сами значения value от 1 до 5.

var rolls=[];
rolls[0]=[2.745, 4.45, 6.6, 8.9, 11.2];

Это переменная в которую заносится значение value.

var vid_materiala=parseInt(my_parrent.find('select').val());

Вопрос в следующем, какую конструкцию применить, чтобы сделать следующее: добавить к каждой категории картинки в виде небольших боксов которые можно будет выбрать ?

Пример ДО.

Пример ПОСЛЕ.

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>

Да здорово, работает. И ещё маленький вопросик

vid_materiala=parseInt(my_parrent.find('select').val());

После нажатия на select выбирает свой value (Категория 1, Категория 2), а как сделать чтобы он выбирал по картинке.
По вашей схеме пробовал вот так

vid_materiala=parseInt(my_parrent.find('ul.cat > li').val());

Но он выбирает только value="1" если кликать по всем картинкам.

<ul id = "cat1" class="cat" checked="checked">
    <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>

KEMPZOR,

Цитата:

Сообщение от KEMPZOR

а как сделать чтобы он выбирал по картинке.

Что именно вам нужно выбирать по картинке?

Dilettante_Pro,
удивляюсь, как ты первый то пост сумел понять? :)

Цитата:

Сообщение от Dilettante_Pro (Сообщение 438382)

KEMPZOR,

Что именно вам нужно выбирать по картинке?

По клике на картинку выбирается соответствующий value.

Тоесть сейчас выбирается value категории по SELECT'y, а хотелось бы чтобы именно по li.

rolls[0]=[2.745, 4.45, 6.6, 8.9, 11.2];

1 Категория - 2.745
2 Категория - 4.45
3 Категория - 6.6
4 Категория - 8.9
5 Категория - 11.2

<select class="material-select">
    <option value="1">1 Категория</option>
    <option value="2">2 Категория</option>
    <option value="3">2 Категория</option>
    <option value="4">2 Категория</option>
    <option value="5">2 Категория</option>
   </select>

Клик картинка 1 - value 1, клик картинка 2 - value 2 и так далее..

KEMPZOR,
Ну так пропишите во все value в li для ul id = "cat1" - единицу, для ul id = "cat2" - двойку и т.д.

<!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 () {
         var rolls=[2.745, 4.45, 6.6, 8.9, 11.2];

         $("#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() + " Артикул " + $(this).data("art") + " Цена " + rolls[+$(this).val() - 1]);
         });
       });

   </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" data-art="Ткань 1"><img src="http://javascript.ru/cat/list/appscript.png" /></li>
    <li value="1" data-art="Ткань 2"><img src="http://javascript.ru/cat/list/dom.gif" /></li>
    <li value="1" data-art="Ткань 3"><img src="http://javascript.ru/cat/list/event.gif" /></li>
    <li value="1" data-art="Ткань 4"><img src="http://javascript.ru/cat/list/integr.jpg" /></li>
    <li value="1" data-art="Ткань 5"><img src="http://javascript.ru/cat/list/donkey.gif" /></li>
   </ul>
      <ul id = "cat2" class="cat">
    <li value="2" data-art="Ткань 21"><img src="http://javascript.ru/cat/list/libs.jpg" /></li>
    <li value="2" data-art="Ткань 22"><img src="http://javascript.ru/cat/list/mobile.jpg" /></li>
    <li value="2" data-art="Ткань 23"><img src="http://javascript.ru/cat/list/learn.gif" /></li>
    <li value="2" data-art="Ткань 24"><img src="http://javascript.ru/cat/list/js.gif" /></li>
    <li value="2" data-art="Ткань 25"><img src="http://javascript.ru/cat/list/nodejs.png" /></li>
   </ul>
   <div id="res"></div>
 </body>
</html>

Цитата:

Сообщение от рони (Сообщение 438384)

Dilettante_Pro,
удивляюсь, как ты первый то пост сумел понять? :)

В результате пребывания на этом форуме со временем развиваются телепатические способности:) Так что вангуем помаленьку

А что писать вот в этот код

var vid_materiala=parseInt(my_parrent.find('select').val());

Вместо 'select' поставил 'ul.cat > li'
Вот так должно быть, так как вместо картинок будет разные ткани с разными ценами.

<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>

Но почему то если покликать все значения - value всегда 1.

Вот код http://codepen.io/KEMPZOR/pen/vybeeq , помогите пожалуйста.

KEMPZOR,
Зачем вам my_parrent.find('select').val() ?

Вы пример пост7 смотрели?
Вот здесь

$("li").on("click", function () {
             $("#res").html($(this).html() + rolls[+$(this).val() - 1]);
         });

Можете получить из li все что угодно, например,

rolls[+$(this).val() - 1]

- цена категории
Можно добавить

var image = $(this).find("img").prop("src");

- имя картинки ткани,
Если нужно - можно добавить в li еще свойства, в которых хранить и доставать при клике нужные вам параметры. (см. добавления в пост7)