logo标签列表

想通过选择一个下拉列表来更改多个下拉列表的值

javascripthtmljquery
3

首先，这个问题看起来像是一个重复的问题，我也不会为这个问题争论。我的问题是我在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）相应的值。我为所有3个select标签设置了相同的value属性。目前，它只适用于name_n下拉菜单，并且我从这里找到了解决方案。我尝试将代码扩展到我的第三个下拉菜单，但失败了。
2/ 选择了device_n中的任何值后，如果我从name_n下拉菜单中选择任何值，则相应的值将显示在value_n下拉菜单中。我为name_n和value_n select标签设置了一个value_1属性。每个value_1的值都是name_n和value_n选项的唯一值。

此处提供了一个工作中的Fiddle链接。如果取消JS部分的第119和124行，那么将出现我在第1点中提到的问题。
正如我之前所说，我在Stack Overflow上发现了很多这样的问题，但大多数情况下是针对2个下拉菜单的。我在这里找到了一个针对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>

1个回答
2

您已经拥有所有选项，因此无需再次生成它们。每当选择框的值发生更改时，您可以先隐藏所有选项，然后使用.show()显示匹配值的选项，最后使用prop("selected",true)将第一个选项设置为选中状态。

演示代码：

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").trigger('change') //call second select
}

$("#device_n").change(function() {
  var id = $(this).val();
  $("#name_n option").hide() //hide all options
  $("#name_n option[value='" + id + "']").show(); //show options where value matches
  $("#name_n option[value_1=0][value='" + id + "']").prop('selected', true); //set first value selected
  $("#name_n").trigger('change') //call other select
});

$("#name_n").change(function() {
  var values = $("#device_n").val();
  var value_1 = $(this).find("option:selected").attr("value_1")
  //same ...as before
  $("#value_n option").hide()
  $("#value_n option[value_1='" + value_1 + "'][value='" + values + "']").show();
  $("#value_n option[value_1='" + value_1 + "'][value='" + values + "']").prop('selected', true);


})
make_dropdown_1(data);
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>

真棒。必须学习有关JS和jQuery中不同参数和函数调用工作的知识。 关于这行代码$("#device_n").trigger('change') //call second select，我有一个问题。难道comment不应该是“调用第一个选择器”吗？ - user10634362
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接