从Javascript输出HTML表单元素
我刚刚开始使用Javascript，所以这听起来像是一个新手问题。 我想打印出一个select表单元素。但是我在代码的javascript部分执行它，因为必须从脚本中的数组访问选项列表。我在HTML部分使用了一个div元素来输出这个select元素。我的代码如下从Javascript输出HTML表单元素,javascript,html,forms,select,Javascript,Html,Forms,Select,我刚刚开始使用Javascript，所以这听起来像是一个新手问题。 我想打印出一个select表单元素。但是我在代码的javascript部分执行它，因为必须从脚本中的数组访问选项列表。我在HTML部分使用了一个div元素来输出这个select元素。我的代码如下 <head> <script> function currentWorlds() { var string="<select id='worldSelected'>";
<head>
<script>
function currentWorlds()
{
var string="<select id='worldSelected'>";
for(var i=0;i<universe.name.length;i++)
{
string+="<option value='"+i+"'>"+universe.name[i]+"</option>";
}
string+="</select>";
$('#universeOptions').html(string);
}
$(function(){
currentWorlds();
});
</script>
</head>
<body>
<form>
Select from current games: <br>
<div id="universeOptions"></div>
<input type="button" id="selectWorldButton" name="selectWorld" value="Select Game"> </br>
</form>
</body>
谢谢 使用jquery对其进行编码以检查所选值
$('#worldSelected').change(function(){
console.log($(this).val());
});
每次选择新值时，都会记录selectbox的值。您也可以将此代码添加到currentWorlds函数定义之上。注意：这需要添加jquery库。正如我从您发布的代码中注意到的，您使用了jquery。因此，我假设您已经在文件中链接了它。我会稍微编辑一下代码。。。试试这个，让我知道它是否有效： 查看控制台日志
您可以在代码中直接使用此选项：
function currentWorlds()
{
var string = document.createElement('select');
string.setAttribute('id', 'worldSelected');
var string1;
for(var i=0;i<universe.name.length;i++)
{
string1 = document.createElement('option');
string1.value = i;
string1.text = universe.name[i];
string.appendChild(string1);
}
document.getElementById('universeOptions').appendChild(string);
}
你能在你记录所选世界的地方添加代码吗？0可能是您选择第一个元素的结果。第一个元素的id为0。因为我从循环中的0开始，它就在我调用currentWorlds函数之后的主javascript函数中。”选择console.logWorld；console.logdocument.getElementByIdworldSelected.selectedIndex；'检查我刚刚发布的答案。我在代码中添加了，它不会注销任何内容。根据我选择的选项，似乎没有为worldSelected id分配任何值。您可以右键单击选择框并单击inspect元素。在开发工具中，您可以找到页面的原始html代码。检查选项和选择框是否从那里分配了ID。只是澄清一下，通过使用div将select元素作为字符串输出，它的功能是否会像HTML表单元素一样正常？或者我必须以其他方式操作它，这样它才能接受用户的输入？这是一种输出html的方式，通常看起来确实有效。但是您也可以使用jquery库添加元素，jquery库有很多方法。追加like是一种很好的方法。但他们都做同样的事情。你能用chrome开发者工具找到ID吗？是的，我设法看到分配给选项和选择框的ID。worldSelected的id没有附加值。我在谷歌上搜索答案，我想当用户选择选项时，我必须将事件处理程序附加到选择选项。但我不太确定。它似乎没有注销任何东西。@Saima-抱歉更新了Jsbin链接-是！它起作用了！谢谢你的帮助。作为澄清，您使用的.append、.attr和.text方法是否用于操作ID？他们到底做什么？@Saima:好东西。不，它们不会对id本身执行任何操作。append查看指定的元素（在本例中是通过其id指定的），然后将option元素附加到该元素。attr访问刚刚附加的option元素的属性“value”，并给它一个值“i”，对于.text也是一样，它访问option元素的文本，并在当前位置添加universe.name的值。别忘了接受！当然，如果你接受这个答案：
function currentWorlds()
{
var string = document.createElement('select');
string.setAttribute('id', 'worldSelected');
var string1;
for(var i=0;i<universe.name.length;i++)
{
string1 = document.createElement('option');
string1.value = i;
string1.text = universe.name[i];
string.appendChild(string1);
}
document.getElementById('universeOptions').appendChild(string);
}