个人中心
gpt4 book ai didi

javascript - 想要通过选择下拉菜单来更改多个下拉菜单的值

转载 作者：行者123 更新时间：2023-12-04 14:58:05 26 4
gpt4 key购买 nike

首先，这个问题好像是一个重复的问题，我也不是在争论这个问题。我的问题是我在 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 个选择标签设置了相同的 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>

最佳答案

您已经拥有所有选项，因此无需再次生成它们。您可以简单地首先在任何选择框值更改时隐藏所有选项，然后使用 .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>

关于javascript - 想要通过选择下拉菜单来更改多个下拉菜单的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67527377/

26 4 0
文章推荐： vaadin - 使用 Vaadin 14 初始化 VaadinServlet 时出现 NullPointerException
文章推荐： python - 如何获取 Pandas 数据框中单元格的内容
文章推荐： CSS 深色主题媒体查询不适用于 Firefox 和 Chrome？
文章推荐： vaadin - 从 Vaadin (20) Flow 项目中的模板文件初始化路由器事件