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

问题描述 投票：1回答：4

我试图从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
4个回答
0
投票

理想情况下，<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>
0
投票

我不确定你是否知道但是分配变量不输出东西，你可以使用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>
0
投票

首先，你应该将你的<option>元素包裹在<select>中。

其次，您提供的代码为您提供了一个HTMLNodeList对象，其中包含<option>作为其元素。他们的价值在items[0].value下，该项目本身在items[0].innerHTML或items[0].textContent下

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

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

你的代码运行正常。查看下面的代码段。

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.