issue with javascript code to accommodate multiple html select menus

Question

Here is what I've got so farr.. The goal is to have a select menu displaying numbers from 0 to 9, with the value as the respective number, and to also incrementally number the select tags.

<!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>

Engineer · Accepted Answer · 2012-06-15 16:14:06Z

1

You need to append select element as a whole, otherwise it is invalid markup:

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;   
}

DEMO

edited Jun 15, 2012 at 16:14

answered Jun 15, 2012 at 15:26

Engineer

48.9k12 gold badges90 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

j08691 · Accepted Answer · 2012-06-15 15:23:21Z

0

You were almost there. In your line to add the actual option elements you were trying to append them to the div and not the select element. You needed to use getElementsByName(counter)[0] instead of getElementById("options") there.

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 example.

answered Jun 15, 2012 at 15:23

j08691

209k33 gold badges269 silver badges281 bronze badges

Collectives™ on Stack Overflow

issue with javascript code to accommodate multiple html select menus

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related