Question

我有一个这样的对象：

{
  "Administration": {
    "5756":"AdminRelease 1",
    "8238":"AdminRelease 2",
    "8239":"AdminRelease 3"
  },
  "Office": {
    "6016":"AndroidRelease 1",
    "6017":"AndroidRelease 2",
    "6044":"AndroidRelease 4",
    "6019":"AndroidRelease 5"
  }
}

我正在尝试在select标签中作为下拉列表进行迭代。我正在尝试为Administration和Office创建一个选项组，在该选项组下我将具有相应的发布列表作为下拉列表。

到目前为止，我所做的是：

<select id="releaseDropdown_${widgetId}" onChange="renderChartWithData_${widgetId}">
  #if(!$releasesList.isEmpty())
    #foreach($pName in $releasesList.keySet())
      <optgroup label="${pName}">
        #foreach($key in $releasesList.keySet())
          #if("${defaultRelease}" == "${key}")
            <option value="${key}"selected="selected">
          #else
            <option value="${key}">
          #end
          $releasesList.values().get(${key})
          </option>
        #end
      </optgroup>
    #end
  #else
    <option value="0">No Release</option>
  #end
</select>

我是UI的新手，无法在我的代码中发现错误。如果有语法错误或逻辑错误。

Answer 1

如果我正确地回答了您的问题，则需要根据您的采购对象来构成选择元素。也许，以下快速又肮脏的示例将为您提供有关如何实现所需功能的提示。

var srcData = {
    "Administration":{
        "5756":"AdminRelease 1",
        "8238":"AdminRelease 2",
        "8239":"AdminRelease 3"
    },
    "Office":{
        "6016":"AndroidRelease 1",
        "6017":"AndroidRelease 2",
        "6044":"AndroidRelease 4",
        "6019":"AndroidRelease 5"
    }
};

Object.values(srcData).forEach((item, index) => {
  let wrapper = document.getElementById('wrapper');
  let label = Object.keys(srcData)[index];
  wrapper.innerHTML += `<label>${label}</label>`;
  let selectHTML = '<select>';
  Object.values(item).forEach((option, index) => {
    selectHTML +=`<option value="${Object.keys(item)[index]}">${option}</option>`;
  });
  wrapper.innerHTML += selectHTML+'</select>';
});

<div id="wrapper"></div>

迭代对象以创建带有选项组的选择

1 个答案: