Question

I am trying to make a script that, when I choose in the dropdown 4, the div is repeated 4 times.

<div>repeat<div>

<script type = "text/javascript">
    document.write('<select>')
    for (var i = 0; i < 10; i++) {
        document.write('<option value=' + i + '>' + i + '</option>');
    }
    document.write('</select>')
</script>

Now the problem is repeat the number of times that the user choose in dropdown.

demo

Answer 1

Listening to the “onchange” event on the select element will give you the feedback you need to modify the document structure. Fiddle example

HTML

<div id="repeat"></div>

JavaScript

var select_element = document.createElement("select");
var option_element;

for (var i = 0; i < 10; i++) {
    option_element = document.createElement("option");
    option_element.value = i;
    option_element.text  = i;
    select_element.appendChild(option_element);
}

select_element.addEventListener("change", function (event) {
    var repeat_container = document.getElementById("repeat");
    var div_element;

    // Remove previously added divs
    while (repeat_container.firstChild) {
      repeat_container.removeChild(repeat_container.firstChild);
    }

    // Add new divs
    for (var i = 0; i < event.currentTarget.value; i++) {
        div_element = document.createElement("div");
        div_element.style.backgroundColor = "rgb(0,255," + (i * 20) + ")";
        div_element.style.height = "10px";
        repeat_container.appendChild(div_element);
    }
}, false);

document.body.appendChild(select_element);