javascript - 为什么 HTML 数据列表的选项标签不起作用

Question

如标题所述，我在想这部分代码是否有错误:

var td5 = document.createElement("td");
td5.innerHTML = "Locale";
tr3.appendChild(td5);

var td6 = document.createElement("td");
tr3.appendChild(td6);

var tdc3 = document.createElement("input");
tdc3.type = "text";
tdc3.style.width = "100%";
tdc3.setAttribute('list', 'lcl');
tdc3.id = "loc";
var tdc3a = document.createElement("datalist");
tdc3a.id = "lcl";
var lop1 = document.createElement("option");
lop1.value = "MY";
lop1.innerHTML = "MY";
var lop2 = document.createElement("option");
lop2.value = "SG";
lop2.innerHTML = "SG";
var lop3 = document.createElement("option");
lop3.value = "AU";
lop3.innerHTML = "AU";
var lop4 = document.createElement("option");
lop4.value = "NZ";
lop4.innerHTML = "NZ";
var lop5 = document.createElement("option");
lop5.value = "PK";
lop5.innerHTML = "PK";
var lop6 = document.createElement("option");
lop6.value = "PH";
lop6.innerHTML = "PH";
var lop7 = document.createElement("option");
lop7.value = "ID";
lop7.innerHTML = "ID";
var lop8 = document.createElement("option");
lop8.value = "VN";
lop8.innerHTML = "VN";
var lop9 = document.createElement("option");
lop9.value = "TH";
lop9.innerHTML = "TH";
var lop10 = document.createElement("option");
lop10.value = "IN";
lop10.innerHTML = "IN";
var lop11 = document.createElement("option");
lop11.value = "CN";
lop11.innerHTML = "CN";
var lop12 = document.createElement("option");
lop12.value = "JP";
lop12.innerHTML = "JP";
var lop13 = document.createElement("option");
lop13.value = "KR";
lop13.innerHTML = "KR";
var lop14 = document.createElement("option");
lop14.value = "TW";
lop14.innerHTML = "TW";
var lop15 = document.createElement("option");
lop15.value = "HK";
lop15.innerHTML = "HK";
var lop16 = document.createElement("option");
lop16.value = "HK-EN";
lop16.innerHTML = "HK-EN";
tdc3a.appendChild(lop1);
tdc3a.appendChild(lop2);
tdc3a.appendChild(lop3);
tdc3a.appendChild(lop4);
tdc3a.appendChild(lop5);
tdc3a.appendChild(lop6);
tdc3a.appendChild(lop7);
tdc3a.appendChild(lop8);
tdc3a.appendChild(lop9);
tdc3a.appendChild(lop10);
tdc3a.appendChild(lop11);
tdc3a.appendChild(lop12);
tdc3a.appendChild(lop13);
tdc3a.appendChild(lop14);
tdc3a.appendChild(lop15);
tdc3a.appendChild(lop16);
document.body.appendChild(tdc3);
document.body.appendChild(tdc3a);

下图是我将代码注入(inject)aspx页面后的截图:

下图是我将代码注入(inject)到自己创建的 HTML 虚拟页面后的截图:

附加信息: 我用 Javascript 编写代码的原因是我目前正在为我的工作用途开发一个小书签注入(inject)器。
我正在尝试将 Javascript 代码注入(inject) .aspx 页面以弹出一个包含一些文本字段、数据列表和下拉列表的 div block 。我使用的浏览器是 IE 11。
我试图将原始代码文件注入(inject)到我自己创建的虚拟 HTML 页面中，它完全可以正常工作，没有任何错误，但不是在我刚才提到的 .aspx 页面中。
为了创建下拉列表，我们可能需要创建一个选择标签和几个选项标签作为子标签。这在注入(inject)后的 .aspx 页面中工作正常。
但不幸的是，datalist 标签中的 option 标签无法像上面的屏幕截图那样正常工作。

请各位多多指教。 非常感谢。

Answer 1

1. 有必要将 datalist 元素附加到 body 或文档中存在的任何其他元素，例如

document.body.appendChild(tdc3a);

1. 目前，浏览器似乎忽略了在 input 的 list 属性设置后插入到 DOM 中的 datalists。因此，在设置 input 的 list 属性之前，将 datalist 插入 DOM 很重要。示例:http://codepen.io/askl/pen/kXZLbj

2. Datalist 并不适用于所有浏览器，例如截至 2016 年 7 月，Safari 和 Firefox 不支持它。另请参阅 http://caniuse.com/#search=datalist .