Получение зависимого множественного выбора для отображения данных из массива JSON, вложенного в JQuery - PullRequest
0 голосов
/ 12 марта 2019

Я пытаюсь создать таблицу сравнения, зависящую от опций, выбранных в 2 вопросах, где опции 2-х вопросов зависят от 1-го.Данные, которые будут отображаться после выбора параметров, находятся в массиве JSON в моем JQuery.Хотя JQuery работал хорошо независимо друг от друга, без зависимых вопросов, сейчас он не показывает данные.

Куда я иду не так?

Рисунок ниже - это вывод, который мне нужен, когда таблица сравнения заполняется на основе выбора, сделанного в приведенных выше вопросах.

введите описание изображения здесь

Код, который я создал до сих пор (благодаря большой помощи многих участников):

jQuery(document).ready(function($) {
    jQuery('.js-example-basic-single').select2();
    jQuery('.js-example-basic-multiple').select2();
});

var $selection1 = $('#selection1'),
    $selection2 = $('#selection2'),
    $options = $selection2.find('option');
    
    $selection1.on( 'change', function() {
    $selection2.html( $options.filter('[value="' + this.value + '"]'));
} ).trigger('change');

var StatJSON = {
  "Banana": {
    "Name": "Banana",
    "Parameter1": "65",
    "Parameter2": "30"
  },
  "Apple": {
    "Name": "Apple",
    "Parameter1": "62",
    "Parameter2": "40"
  },
  "Orange": {
    "Name": "Orange",
    "Parameter1": "65",
    "Parameter2": "90"
  },
  "Wolf": {
    "Name": "Wolf",
    "Parameter1": "62",
    "Parameter2": "87"
  },
  "Fox": {
    "Name": "Fox",
    "Parameter1": "57",
    "Parameter2": "43"
  },
  "Bear": {
    "Name": "Bear",
    "Parameter1": "30",
    "Parameter2": "60"
  },
  "Eagle": {
    "Name": "Eagle",
    "Parameter1": "21",
    "Parameter2": "25"
  },
  "Hawk": {
    "Name": "Hawk",
    "Parameter1": "33",
    "Parameter2": "45"
  },
  "BMW": {
    "Name": "BMW",
    "Parameter1": "101",
    "Parameter2": "80"
  }
};

jQuery('#btnSubmit').click(function() {
 var data = [];  
 jQuery('.select2').find(':selected').each(function(e) {
   var this_input = jQuery(this);
   if (this_input.is(':selected')) {
     data.push(this_input.val());
   }
 });
 $('#divResult').empty().append(PrintTable(data));
});

function PrintTable(data) {
  var html = '<table class="opt"><tr><td>';
  if (data && data.length) {
    html += '</td>';
    jQuery.each(data, function(k, v) {
      html += '<td>' + v + '</td>';
    });
    html += '</tr>';
    jQuery.each(StatJSON[data[0]], function(k, v) {
      html += '<tr><td>' + k + '</td>';
        jQuery.each(data, function(k2, v2) {
        html += '<td>' + StatJSON[data[k2]][k] + '</td>';
      });
      html += '</tr>';
    });
  } else { html += 'No results found</td></tr>'; }
  html += '</table>';
  return html;
}
.opt {
  margin: 10px;
  background: #eee;
  border: 1px solid #222;
}
.opt td {
  border: 1px solid #bbb;
  padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
Options:
<select name="selection1" select class="js-example-basic-single" id="selection1">
    <option name="Fruit" value="Fruit">Fruit</option>  
    <option name="Animal" value="Animal">Animal</option>
    <option name="Bird" value="Bird">Bird</option>
    <option name="Car" value="Car">Car</option>
</select> 

<select name="selection2" select class="js-example-basic-multiple" id="selection2" multiple="multiple">
    Options:
    <option name="Fruit" value="Fruit">Banana</option>
    <option name="Fruit" value="Fruit">Apple</option>
    <option name="Fruit" value="Fruit">Orange</option>
    <option name="Fruit" value="Animal">Wolf</option>
    <option name="Fruit" value="Animal">Fox</option>
    <option name="Fruit" value="Animal">Bear</option>
    <option name="Fruit" value="Bird">Eagle</option>
    <option name="Fruit" value="Bird">Hawk</option>
    <option name="Fruit" value="Car">BMW</option>
    <br /><br />
    <input id="btnSubmit" type="submit" value="submit"/>
</select>
    <br /><br />
    <div id="divResult"></div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...