Javascript：从选项列表中提取数据答案

【问题标题】：Javascript: Extract data from option listJavascript：从选项列表中提取数据
【发布时间】：2018-03-05 12:12:56
【问题描述】：

我正在尝试从 php 子页面获取数据。使用javascript，我尝试使用：

var items = document.querySelectorAll('option');
console.log("length : "+items.length);

  <option value="75">item-127 ( 120127 )</option>
  <option value="74">item-163 ( 0 )</option>
  <option value="94">item-139 ( 0 )</option>
  <option value="89">item-135 ( 0 )</option>
  <option value="369">Item-AC95 ( AC95 )</option>
  <option value="63">item-159 ( 120159 )</option>

但它没有返回预期的长度：长度：0 我该怎么办？

最终的期望是有一个包含值和项目的表格

谢谢

【问题讨论】：

我要提取的源只有

标签： javascript html casperjs

【解决方案1】：

理想情况下，<option> 标记必须包含在 <select> 中。这是从选项中检索值的代码

var items = document.querySelectorAll('option');
for(i = 0; i < items.length; i++) {
       item = items[i];
       if (item.value != "") {
       
           alert(item.value);
       }
     }

<option value="75">item-127 ( 120127 )</option>
<option value="74">item-163 ( 0 )</option>
<option value="94">item-139 ( 0 )</option>
<option value="89">item-135 ( 0 )</option>
<option value="369">Item-AC95 ( AC95 )</option>
<option value="63">item-159 ( 120159 )</option>

【讨论】：

使用 forEach 会更干净一些。 developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

【解决方案2】：

我不确定您是否知道但分配变量不会输出内容，您可以使用 console.log() 为例。

const values = document.querySelectorAll('option');

console.log(values);

<html>
<head>
</head>
<body>
<option value="75">item-127 ( 120127 )</option>
<option value="74">item-163 ( 0 )</option>
<option value="94">item-139 ( 0 )</option>
<option value="89">item-135 ( 0 )</option>
<option value="369">Item-AC95 ( AC95 )</option>
<option value="63">item-159 ( 120159 )</option>
</body>
</html>

【讨论】：

代码只是一小部分。当然，我使用 console.log 来显示值。但我的变量是空的。

【解决方案3】：

首先，您应该将 <option> 元素包装在 <select> 中。

其次，您提供的代码为您提供了一个带有<option> 元素的 HTMLNodeList 对象。它们的值在items[0].value 之下，而项目本身在items[0].innerHTML 或items[0].textContent 之下

let options = items.map((option) => {
  console.log(`Item: ${option.textContent}, value: ${option.value}`); 
})

【讨论】：

【解决方案4】：

首先，不要忘记<options> 往往只出现在<select> 标记中。

您的代码运行良好。查看下面的 sn-p。

var items = document.querySelectorAll('option');

console.log('There are ' + items.length + ' options');

items.forEach(function(option,i){
   console.log('option #' + i + '  has value ' + option.value + ' and html:' + option.innerHTML);
});

<html>

<head>
</head>

<body>
  <select>
<option value="75">item-127 ( 120127 )</option>
<option value="74">item-163 ( 0 )</option>
<option value="94">item-139 ( 0 )</option>
<option value="89">item-135 ( 0 )</option>
<option value="369">Item-AC95 ( AC95 )</option>
<option value="63">item-159 ( 120159 )</option>
</select>
</body>

</html>

【讨论】：

我要提取的真正来源既不包含也不包含。我无法更改它，并添加