Я пытаюсь создать таблицу сравнения, зависящую от опций, выбранных в 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>