我正在研究一种动态添加选择输入/下拉框到页面的解决方案。下面的示例代码如果我给每个选择输入一个唯一的id并使用getElementById()包含一行cod4e到脚本,但是如果我使用GetElementsByClassName()则不起作用。
我的目标是使用一个脚本填充选择输入框,而无需为脚本选择输入和相应代码分配唯一ID。
<select class="p1"></select>
<select class="p1"></select>
<select class="p1"></select>
<script>
var Date1 = "<option>" + new Date(new Date().getTime()+(1*24*60*60*1000)).toDateString() + "</option>";
var Date2 = "<option>" + new Date(new Date().getTime()+(2*24*60*60*1000)).toDateString() + "</option>";
var Date3 = "<option>" + new Date(new Date().getTime()+(3*24*60*60*1000)).toDateString() + "</option>";
var Date4 = "<option>" + new Date(new Date().getTime()+(4*24*60*60*1000)).toDateString() + "</option>";
var Date5 = "<option>" + new Date(new Date().getTime()+(5*24*60*60*1000)).toDateString() + "</option>";
var Date = Date1 + Date2 + Date3 + Date4 + Date5
document.getElementsByClassName("p1").innerHTML = Date;
</script>
答案 0 :(得分:9)
getElementsByClassName()
函数(注意&#34; Elements&#34;中的 s )返回NodeList,而不是单个节点。您必须遍历列表才能单独对每个节点进行操作。
您可以使用简单的for
循环执行此操作:
var selects = document.getElementsByClassName("p1");
for (var i = 0; i < selects.length; ++i)
selects[i].innerHTML = Date;
我强烈怀疑您的代码还有另一个问题:您正在创建一个名为&#34; Date&#34;的全局变量,这将破坏JavaScript&#34; Date&#34;构造函数绑定。使用其他名称(如小写&#34;日期&#34;)。