为什么 HTML 数据列表的选项标签不起作用
发布于2021-11-03 12:35 阅读(852) 评论(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/kXZLbjDatalist 不适用于所有浏览器，例如 Safari 和 Firefox 截至 2016 年 7 月不支持它。另见http://caniuse.com/#search=datalist。
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/216924/b1b95a4dea4198749eeb/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力