Показать сообщение отдельно
  #5 (permalink)  
Старый 25.05.2016, 23:44
Профессор
Отправить личное сообщение для Царь Леонид Посмотреть профиль Найти все сообщения от Царь Леонид
 
Регистрация: 22.08.2013
Сообщений: 217

Если у вас данные представлены, как показал Рони, то вот так примерно (можно и покороче, но лень думать)
var data = {"А" : ["Арбуз","Алыча"], "С" : ["Слива"], "В" : ["Виноград", "Вишня"]};

function displayData(data){
  var body = document.body;
  for(var val in data){
     var span = document.createElement('span');
     span.innerHTML = val
     span.className = "selected"
     body.appendChild(span)
  }
}

function filterData(el){
  var r = document.getElementById('result')
  var arr = [];
    for(i in data) {
      i == el? arr.push(data[i]):'';
    }
  var e = arr.join(', ')
  r.innerHTML = e
}

displayData(data)
var clicked = document.querySelectorAll('.selected');

for(var i = 0; i<clicked.length; i++){
  clicked[i].addEventListener('click', function(event){
    filterData.call(null, event.target.innerHTML)
  })
}

=======================================
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="result"></div>
</body>
</html>


Вот ссылка на песочницу

Последний раз редактировалось Царь Леонид, 26.05.2016 в 00:11.
Ответить с цитированием