如何在“选择组元素”中动态嵌套“选项元素”？答案

【问题标题】：How do I dynamically nest “option elements” within “opt group elements”?如何在“选择组元素”中动态嵌套“选项元素”？
【发布时间】：2021-01-10 14:55:30
【问题描述】：

const url = "https://restcountries.eu/rest/v2/all"

  fetch(url)
  .then(function(response){
    return response.json()
  })
  .then(function(data){
    console.log(data)
    worldRegion(data)
  })


  function worldRegion(myData) {
    var myArray = []
    for(var i = 0; i < myData.length; i++) {
      myArray.push(myData[i].region)
    }
    var region = myArray.filter(onlyUnique);
    var regionOptgroup = ""
    for(var i = 0; i < region.length; i++) {
      regionOptgroup += `<optgroup value=${region[i]} label="${region[i]}">${region[i]}</optgroup>`
    }
    document.querySelector("select").innerHTML = regionOptgroup
    const nodeList = document.querySelectorAll("optgroup")

    console.log(nodeList)

    var options  = ""
    for(var i = 0; i < myData.length; i++) {

      for(var j = 0; j < nodeList.length; j++) {
        if(myData[i].region === nodeList[j].value)
        options += `<option value="${myData[i].name}">${myData[i].name}</option>`
      }

    }
    document.querySelector("select").innerHTML = options

  }

  function onlyUnique(value, index, self) {
    return self.indexOf(value) === index;
  }

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>what language do they speak</title>
  </head>
  <body>
    <select class="" name="">


    </select>

    <br>

  </body>
  <script src="index.js" type="text/javascript">

  </script>
</html>

我使用 for 循环创建了 6 个不同的 opt 组元素，即亚洲、欧洲、非洲、大洋洲、美洲和极地。然后我将相关的选项组元素嵌套在一个选择元素中。我还将元素或节点列表的选择存储在名为 nodeList 的变量中。

我试图复制一种或多或少相似的方法，以便根据国家所属的地区将选项元素嵌套在选项组元素中。因此，带有 InnerHTML Singapore 和“value = Asia”的选项元素将嵌套在 Asia opt 组元素中。等等 250 个选项元素。

我一直在尝试做的是提取每个选项组元素的值，以便相应地嵌套我的选项元素。因此，我的 if 语句中有以下条件：(=myData[i].region === nodeList[j].value)。但是，控制台也会抛出以下错误：“index.js:34 Uncaught (in promise) TypeError: Cannot read property 'value' of undefined at worldRegion (index.js:34) at index.js:10”

然后它就变成了意大利面条代码。

我已尝试以尽可能通俗易懂的方式阐述问题。但是，如果您需要进一步说明，请随时发表评论。

我知道我可能需要处理缩进和优雅，但首先我希望我的代码能够正常工作

const url = "https://restcountries.eu/rest/v2/all"

  fetch(url)
  .then(function(response){
    return response.json()
  })
  .then(function(data){
    console.log(data)
    worldRegion(data)
  })


  function worldRegion(myData) {
    var myArray = []
    for(var i = 0; i < myData.length; i++) {
      myArray.push(myData[i].region)
    }
    var region = myArray.filter(onlyUnique);
    var regionOptgroup = ""
    for(var i = 0; i < region.length; i++) {
      regionOptgroup += `<optgroup value=${region[i]} label="${region[i]}">${region[i]}</optgroup>`
    }
    document.querySelector("select").innerHTML = regionOptgroup
    const nodeList = document.querySelectorAll("optgroup")

    console.log(nodeList)

    var options  = ""
    for(var i = 0; i < myData.length; i++) {

      for(var j = 0; j < nodeList.length; j++) {
      }
      if(myData[i].region === nodeList[j].value)
      options += `<option value="${myData[i].name}">${myData[i].name}</option>`
    }
    document.querySelector("select").innerHTML = options

  }

  function onlyUnique(value, index, self) {
    return self.indexOf(value) === index;
  }

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>what language do they speak</title>
  </head>
  <body>
    <select class="" name="">


    </select>

    <br>

  </body>
  <script src="index.js" type="text/javascript">

  </script>
</html>

【问题讨论】：

我已经解决了部分问题，因为控制台不再抛出错误。我刚刚在我的第二个 for 循环中插入了 if 语句，如下所示： for(var j = 0; j <option value="${myData[i].name}">${myData[i].name}</option> }
代码块已相应更新

标签： javascript for-loop nodelist optgroup

【解决方案1】：

您可以使用 DOM 方法而不是 HTML 创建 optgroup 元素，以便您立即获得对每个已创建元素的引用。将这些元素存储在由区域名称键入的Map 中。

然后，当您最终创建选项时，您可以在该地图中查找该区域，以便检索对相应 optgroup 元素的引用：

const url = "https://restcountries.eu/rest/v2/all";

(async () => {
    const response = await fetch(url);
    const data = await response.json();
    let select = document.querySelector("select");
    // Create a map, keyed by region
    let regions = new Map(data.map(({region}) => [region, null]));
    // Assign an optgroup to each region in that map
    for (let region of regions.keys()) {
        let optgroup = document.createElement("optgroup");
        optgroup.setAttribute("value", region);
        optgroup.setAttribute("label", region || "(blank)");
        select.appendChild(optgroup);
        regions.set(region, optgroup);
    }
    for (let country of data) {
        // Create an option for each country
        let option = document.createElement("option");
        option.setAttribute("value", country.name);
        option.textContent = country.name;
        // Append it to the relevant optgroup
        regions.get(country.region).appendChild(option);
    }
})();

<select class="" name="">
</select>

【讨论】：