您正在尝试访问selectedItems数组的无效索引。应在将此更新的元素追加到dom之后，将所有项一起追加到myElement。
我直接附加到正文，但您可以更改它。

const myElement = document.createElement("div");
let selectItems = data.map((select, i) => (
    `<div class="select">
        <div aria-required="true" class="selectBtn" data-type="">${select.placeholder}</div>    
            <div class="selectDropdown">${select.option.map(el =>
                    `<div class="option" data-type="firstOption">${el}</div>`
            ).join('')}
        </div>
    </div>`)
)

for (let i = 0; i < selectItems.length; i++) {
    myElement.innerHTML += selectItems[i];
}

document.body.appendChild(myElement);

你可以用JavaScript动态地创建你的HTML，结构化的方式如下。这对你将来有帮助。另外，你必须把你的顶层元素myElement附加到现有的HTML文档中的某个地方，就像这里我把它附加到body中一样。

const myElement = document.createElement("div");
let data = [{
  option: [0, 1, 2, 3],
  placeholder: "X"
}, {
  option: [0, 1, 2, 3],
  placeholder: "Y"
}];
data.map((select, i) => {
  const selectEl = document.createElement("div");
  selectEl.className = "select";
  const selectBtn = document.createElement("div");
  selectBtn.innerHTML = select.placeholder;
  selectBtn.className = "selectBtn";
  selectBtn["aria-required"] = true;
  selectBtn["data-type"] = "";
  selectEl.appendChild(selectBtn);
  const selectDropdown = document.createElement("div");
  selectDropdown.className = "selectDropdown";
  select.option.map(x => {
    const optionDiv = document.createElement("div");
    optionDiv.className = "option";
    optionDiv["data-type"] = "firstOption";
    optionDiv.innerHTML = x;
    selectDropdown.appendChild(optionDiv);
  });
  selectEl.appendChild(selectDropdown);
  myElement.appendChild(selectEl);
})

document.body.appendChild(myElement);