为什么 HTML 数据列表的选项标签不起作用-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

487683

文章

249743196

访问

+关注

分类

暂无分类

日期归档

暂无数据

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

发布于2021-11-03 12:35 阅读(851) 评论(0) 点赞(22) 收藏(3)

正如标题所提到的，我在想这部分代码是否有任何错误：

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);

下图是我将代码注入 aspx 页面后的屏幕截图：

下图是我将代码注入我自己创建的 HTML 虚拟页面后的屏幕截图：

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

请您提出意见。非常感谢。

解决方案

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

document.body.appendChild(tdc3a);

目前浏览器似乎忽略了在设置an 属性datalists后插入到 DOMlist中的input内容。因此，插入一个很重要的datalist设置之前，将DOMlist的属性input。示例：http : //codepen.io/askl/pen/kXZLbj
Datalist 不适用于所有浏览器，例如 Safari 和 Firefox 截至 2016 年 7 月不支持它。另见http://caniuse.com/#search=datalist。