0

这是我到目前为止所得到的。目标是有一个选择菜单显示从 0 到 9 的数字，值作为相应的数字，并且还对选择标签进行递增编号。

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script type="text/javascript">
function more()
    {
    counter += 1;
    document.getElementById("options").innerHTML += ("<select name='" + counter + "'>");
    for (var i=0;i<10;i++){
        document.getElementById("options").innerHTML += ("<option value='" + i + "'>"+ i + "</option>");
        }
    document.getElementById("options").innerHTML += ("</select>");

    }



</script>
</head>

<body>
<div id="options">
<script type="text/javascript">
var counter=0;
more();
</script>
</div>

<div id="more">
<button onClick='more()' style='color:blue;font-size:11px;font-family:verdana; cursor:pointer;'>more</button>
</div>
</body>
</html>
4

2 回答 2

1

您需要将select元素作为一个整体附加，否则它是无效标记：

function more()
{
    counter += 1;
    var selectBody = '';
    selectBody += "<select name='" + counter + "'>";
    for (var i=0;i<10;i++){
       selectBody += "<option value='" + i + "'>"+ i + "</option>";
    }
    selectBody += "</select>";
    //Appending as a whole
    document.getElementById("options").innerHTML += selectBody;   
}

演示

于 2012-06-15T15:26:00.140 回答
0

你快到了。在添加实际选项元素的行中，您试图将它们附加到 div 而不是 select 元素。你需要使用getElementsByName(counter)[0]而不是getElementById("options")那里。

function more() {
    counter += 1;
    document.getElementById("options").innerHTML += ("<select name='" + counter + "'>");
    for (var i = 0; i < 10; i++) {
        document.getElementsByName(counter)[0].innerHTML += ("<option value='" + i + "'>" + i + "</option>");
    }
    document.getElementById("options").innerHTML += ("</select>");
}​

jsFiddle 示例。

于 2012-06-15T15:23:21.203 回答