数组下拉列表值未显示

Question

我想在选择选项下拉列表中显示一个数组

var data =  [
      { 
       "batch_number": "WJ0771104"
      },
      { 
       "batch_number": "WJ0771104"
      },
      { 
       "batch_number": "WJ0771104"
      }
    ];
var select = document.getElementById("rec_mode");
for(index in data) {
	console.log(index);
  select.options[select.options.length] = new Option(data[index], index);
}

<select id="rec_mode"></select>

但是我得到的列表里面有空值。我可以看到下拉菜单已扩展，但内部没有任何价值。
我在这里做错了什么

Answer 1

我想得到你的结果

var data =[
  { 
   "batch_number": "WJ0771104"
  },
  { 
   "batch_number": "WJ0771104"
  },
  { 
   "batch_number": "WJ0771104"
  }
];
var select = document.getElementById("rec_mode");
for(index in data) {
console.log(index);
console.log(data[index].batch_number);
select.options[select.options.length] = new Option(data[index].batch_number, index);
}

<select id="rec_mode"></select>

Answer 2

尝试对数据数组的每个循环使用a。

在这里尝试这个。

var data = [{
    "batch_number": "WJ0771104"
  }, {
    "batch_number": "WJ0771104"
  },
  {
    "batch_number": "WJ0771104"
  }
]
var select = document.getElementById("rec_mode");
data.forEach((doc) => {
  var opt = document.createElement('option');
  opt.value = opt.text = doc["batch_number"];
  select.add(opt);
})

<select id="rec_mode"></select>