Форум

ugator · #1 (**permalink**) 24.10.2015, 13:39

Привет всем.
Нужна помощь
Есть набор из двух селектов и небольшой массив данных со значениями из списков и результирующим значением
Как при выборе двух значений селектов, сравнить их с массивом и записать в DIV значение из таблицы?

<select id="" name="select1" class="select-1">
<option onclick="optioner(this)" value="20">20</option>
<option onclick="optioner(this)" value="25">25</option>
<option onclick="optioner(this)" value="30">30</option></select>
<select id="" name="select2" class="select-2">
<option onclick="optioner(this)" value="1.3">1.3</option>
<option onclick="optioner(this)" value="1.4">1.4</option>
<option onclick="optioner(this)" value="1.5">1.5</option></select>
<div id="values"></div>
<script>
data = {
'1.3':{'20':'155'},{'25':'156'},{'30':'157'},
'1.4':{'20':'159'},{'25':'160'},{'30':'170'},
'1.5':{'20':'165'},{'25':'169'},{'30':'172'}
}
</script>

рони · #2 (**permalink**) 24.10.2015, 14:11

ugator,
data неправильная и Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #3 (**permalink**) 24.10.2015, 14:20

ugator,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<select id="" name="select1" class="select-1">
 <option value="20">20</option>
 <option value="25">25</option>
 <option value="30">30</option></select>
 <select id="" name="select2" class="select-2">
 <option value="1.3">1.3</option>
 <option value="1.4">1.4</option>
 <option value="1.5">1.5</option></select>
 <div id="values">155</div>
 <script>
 var data = {
 '1.3':{'20':'155','25':'156','30':'157'},
 '1.4':{'20':'159','25':'160','30':'170'},
 '1.5':{'20':'165','25':'169','30':'172'}
 },
 sel = document.querySelectorAll('select');
 [].forEach.call(sel, function(item) {
         item.addEventListener('change', function() {
             var div = document.getElementById('values');
             div.innerHTML = data[sel[1].value][sel[0].value]
         });
     });
 </script>
</body>

</html>

интересно откуда пошла традиция ставить клики на option последнее время?

ugator · #4 (**permalink**) 24.10.2015, 14:23

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

ugator,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
<select id="" name="select1" class="select-1">
 <option value="20">20</option>
 <option value="25">25</option>
 <option value="30">30</option></select>
 <select id="" name="select2" class="select-2">
 <option value="1.3">1.3</option>
 <option value="1.4">1.4</option>
 <option value="1.5">1.5</option></select>
 <div id="values">155</div>
 <script>
 var data = {
 '1.3':{'20':'155','25':'156','30':'157'},
 '1.4':{'20':'159','25':'160','30':'170'},
 '1.5':{'20':'165','25':'169','30':'172'}
 },
 sel = document.querySelectorAll('select');
 [].forEach.call(sel, function(item) {
         item.addEventListener('change', function() {
             var div = document.getElementById('values');
             div.innerHTML = data[sel[1].value][sel[0].value]
         });
     });
 </script>
</body>

</html>

интересно откуда пошла традиция ставить клики на option последнее время?

Эта традиция пошла от отсутствия опыта в JS

ugator · #5 (**permalink**) 24.10.2015, 14:28

А что вот это такое [].forEach - квадратные скобки? Это массив селектов или что такое? Никогда такого в скриптах не видел.

ugator · #6 (**permalink**) 24.10.2015, 14:31

Спасибо за решение. Все работает.

рони · #7 (**permalink**) 24.10.2015, 14:46

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

А что вот это такое [].forEach - квадратные скобки? Это массив селектов или что такое? Никогда такого в скриптах не видел.

перебор DOM-коллекции

Форум

Справочник

Discord чат

Курсы javascript