无法从 Javascript 中使用 FOR 循环创建的选定选项元素 console.log() textContent 来填充 Select 元素中的列表

Question

我有一个函数可以将选项元素列表填充到 select 元素中。

function createOptionElements(){
    const select = document.querySelector('select');
    for(let i=1;i<11;i++){
        const option = document.createElement('option');
        option.textContent = i;
        select.appendChild(option);
    }
}

当我 select 来自 select 的选项值 3 时，我希望 console.log(option.textContent) 输出 true。

function outputOptionTextContent(){
  const option = document.querySelector('option');
  if (option.textContent === "3"){
    console.log(true);
  }
  else {
    console.log(false);
  }
}

当我简单地调用 console.log(option.textContent) 时，我只会得到列表中的第一个值，即 1，即使我 select 是一个不同的值。

我尝试这样做的原因是，我正在对 JSON 数据调用 HTTP GET 请求，数据具有名称属性，名称属性将添加到 select 作为选项，＆我想在单击特定名称时调用一个函数，所以我正在考虑添加一个函数来查找 textContent 的值，然后将 textContent 值与 JSON 数据中的名称进行比较, 如果它们匹配，则调用该函数。

Answer 1

document.querySelector 只有 select 找到第一个元素。相反，执行 document.querySelectorAll('option') 它将 return 一个 NodeList。这样你就可以遍历它并做你想做的事

编辑：上面忽略

向您的 select 元素添加事件侦听器以进行输入。

select.addEventListener('input', e => {
   let value = select.options[select.selectedIndex].value;
   console.log(value);
})

Answer 2

背后的原因可能是 textContent 不是标准属性，如果使用内置方法，标准属性是值也更好

option.setAttribute(“value”, variableWithValue);

是的，如果有 setAttribute 还有一个 getAttribute

，你猜对了

option.getAttribute(“value”);

所以最终结果应该是这样的

window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');

   const select = document.querySelector('select');
   for(let i=1;i<11;i++){
     const option = document.createElement('option');
     option.setAttribute(“value”,i);
     select.appendChild(option);
    }

/// add the select to the document
document.body.appendChild(select);

select.addEventListener("change", (e) => {

  const optionSelected = e.target.value;
})

});

无法从 Javascript 中使用 FOR 循环创建的选定选项元素 console.log() textContent 来填充 Select 元素中的列表

Cannot console.log() textContent from a selected Option Element that was created using a FOR loop in Javascript to populate a list in a Select Element

javascript

json

for-loop

get

createelement