【发布时间】：2021-08-04 05:13:51
【问题描述】：
首先，这个问题似乎是一个重复的问题，我也不是在争论这个问题。我的问题是我是 JavaScript 和 jQuery 的新手，所以很难从网站上获取正确的关键字/解决方案。
首先是关于我使用的 JSON 的数据结构。我只是给出一个切片，你会在例子中得到完整的。
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"
]
}
}
我的要求：
我有三个下拉菜单（关于select 标签，它们是device_n、name_n、value_n。）我想要两件事的菜单。
1/ 如果我从device_n 中选择一个值（例如：0001_Summer），那么在第二个和第三个下拉列表中将自动显示它的（0001_Summer's）相应的值。我为所有 3 个选择标签设置了相同的 value 属性。现在，它只适用于name_n 下拉列表和我从here 获取的解决方案。我试图扩展我的第三个下拉菜单的代码，但失败了。
2/ 从device_n 中选择任何值后，如果我从name_n 下拉列表中选择任何值，那么它的相应值将显示在value_n 下拉列表中。我为name_n 和value_n select 标签设置了属性value_1。 value_1 的每个值对于name_n 和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。
正如我之前所说，这个问题我在 SO 中发现了很多，但在大多数情况下，我发现了 2 个下拉菜单。我找到了一个here 3 个下拉列表，但无法将它与我的案例缝合。
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>【问题讨论】：
标签： javascript html jquery