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

あなたはほとんどそこにいました。実際のオプション要素を追加する行で、select要素ではなくdivに追加しようとしていました。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 に答える