First of all, this question seems like a duplicate question, and I am also not arguing over this issue. My problem is I am quite new in JavaScript and jQuery so struggling a lot to fetch the right keyword/solution from sites.
At first about the data structure of the JSON I am using. I am just giving a slice, full you will get in the example.
data = {
"0001_Summer": {
"param": [
"row_heat_0",
"row_heat_1",
"row_heat_2",
"row_heat_3",
"row_heat_4",
"row_heat_5",
"row_heat_6",
"All"
],
"value": [
"value_00",
"value_01",
"value_02",
"value_03",
"value_04",
"value_05",
"value_06",
"All"
]
}
}
My requirements:
I have three dropdown(With respect to select tag they are device_n, name_n, value_n.) menus where I want two things.
1/ If I select a vaue from device_n (eg: 0001_Summer) then automatically in the 2nd and 3rd dropdown only it's(0001_Summer's) corresponding values will be shown. I have set for all 3 select tag same value attribute. Right now, it is only working for name_n dropdown and the solution I have taken from here. I have tried to extend the code for my 3rd dropdown menu but failed.
2/ After selecting any value from the device_n if I select any value from name_n dropdown then it's corresponding value will be shown in value_n dropdown. I have set a attribute value_1 for name_n and value_n select tag. Each value of value_1 is unique for the option of name_n and value_n.
A working Fiddle link is give here. IF you uncomment line 119 and 124 from JS part then the problem will arise that I have mentioned in point number 1.
As I have told before that this problem I have found quite a lot in SO but in most cases I have found for 2 dropdown. One I have found here for 3 dropdown but cannot stitch it with my case.
data = {
"0001_Summer": {
"param": [
"row_heat_0",
"row_heat_1",
"row_heat_2",
"row_heat_3",
"row_heat_4",
"row_heat_5",
"row_heat_6",
"All"
],
"value": [
"value_00",
"value_01",
"value_02",
"value_03",
"value_04",
"value_05",
"value_06",
"All"
]
},
"0002_Winter": {
"param": [
"row_cloud_0",
"row_cloud_1",
"row_cloud_2",
"row_cloud_3",
"row_cloud_4",
"row_cloud_5",
"row_cloud_6",
"row_cloud_7",
"row_cloud_8",
"All"
],
"value": [
"value_00",
"value_01",
"value_02",
"value_03",
"value_04",
"value_05",
"value_06",
"value_07",
"value_08",
"All"
]
},
"0003_Spring": {
"param": [
"row_color_0",
"row_color_1",
"row_color_2",
"row_color_3",
"row_color_4",
"All"
],
"value": [
"value_00",
"value_01",
"value_02",
"value_03",
"value_04",
"All"
]
},
"0004_Autumn": {
"param": [
"dev_x_0",
"dev_x_1",
"dev_x_2",
"dev_x_3",
"All"
],
"value": [
"value_00",
"value_01",
"value_02",
"value_03",
"All"
]
}
}
function make_option_1(data, select, value, value_1 = null) {
option = $("<option>")
.attr({
text: data,
value: value,
value_1: value_1
}).html(data);
select.append(option);
}
function make_dropdown_1(data) {
var select_device = document.getElementById("device_n");
var select_name = document.getElementById("name_n");
var select_value = document.getElementById("value_n");
var jqr_select_device = $(select_device);
var jqr_select_name = $(select_name);
var jqr_select_value = $(select_value);
for (let a in data) {
make_option_1(a, jqr_select_device, a);
for (let b = 0; b < Object.keys(data[a]["param"]).length; b++) {
make_option_1(data[a]["param"][b], jqr_select_name, a, b);
make_option_1(data[a]["value"][b], jqr_select_value, a, b);
}
}
}
$("#device_n").change(function() {
if ($(this).data('options') === undefined) {
/*Taking an array of all options-2 and kind of embedding it on the device_n*/
$(this).data('options', $('#name_n option').clone());
/* $(this).data('options', $('#value_n option').clone()); */
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#name_n').html(options);
/* $('#value_n').html(options); */
});
make_dropdown_1(data);<!DOCTYPE html>
<html lang="en">
<head>
<title>JSON Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body id="body" style="margin-top: 0">
<div class="container" style="margin-top:100px;">
<label for="combination">make combination:</label>
<select name="device_n" id="device_n"></select>
<select name="name_n" id="name_n"></select>
<select name="value_n" id="value_n"></select>
</div>
</body>
</html>
