Question

我试图创建两个从JSON变量中提取值的依赖列表。

数据采用以下格式：

{
      "Name1": [
        {
          "Name1_Nickname": "ID1"
        }
      ],
      "Name2": [
        {
          "Name2_Nickaname": "ID2"
        }
      ],
      "Name3": [
        {
          "Name3_Nickname1": "ID3_1"
        }, {
          "Name3_Nickname2": "ID3_2"
        }
      ]
    }

因此，当您看到我正在处理Map<String,List<Map<String,String>>>时，我将其解析为json对象。我试图找到一种方法来创建一个包含所有Name1，Name2，Name3的第一个Picklist，并根据我们选择的Name创建第二个带有Name1_Nickname的选项列表，例如，如果我们选择Name1和Name3_Nickname1，Name3_Nickname2，如果我们选择Name3

Answer 1

循环访问对象并根据该对象设置select选项非常简单。然后，您将需要一个事件处理程序来处理第一个选择的更改。

var items = {
      "Name1": [
        {
          "Name1_Nickname": "ID1"
        }
      ],
      "Name2": [
        {
          "Name2_Nickaname": "ID2"
        }
      ],
      "Name3": [
        {
          "Name3_Nickname1": "ID3_1"
        }, {
          "Name3_Nickname2": "ID3_2"
        }
      ]
    };

var one = document.getElementById("one");
var two = document.getElementById("two");

//loop the properties to build the first select
for(var prop in items) {
  var option = new Option(prop, prop);
  one.appendChild(option);
}

//add event handler on the first
one.addEventListener("change", function(e) {
  var value = e.target.value;
  
  //clear the second
  for(var i = two.options.length; i > 0; i--) {
    two.options[i - 1].remove();
  }
  
  //append items to the second
  items[value].forEach(function(item) {
    for (var itemProp in item) {
      var option = new Option(itemProp, item[itemProp]);
      two.appendChild(option);
    }
  });
  
});

//force a change event to set the second dropdown to the default
var changeEvent = new Event('change');
one.dispatchEvent(changeEvent);

<select id="one"></select>
<select id="two"></select>

从JSON数据创建两个从属选择列表

1 个答案: