How can I replicate a div a certain number of times based on a select-box value?

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

First, don't use document.write.

You've tagged your question with jQuery and so I'm assuming that you're using that.

Something like this should work (fiddle):

HTML:

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

<select id = "mySelect">
   <option value = "1">1</option>
   <option value = "2">2</option>
   <option value = "3">3</option>
   ...
   <option value = "10">10</option>
</select>

Javascript:

jQuery("#mySelect").change(function() {
   var value = jQuery(this).val();
   var $repeatDiv = jQuery("#repeatDiv");

   for(var i = 0; i < value; i++) {
       $repeatDiv.after($repeatDiv.clone().attr("id", "repeatDiv" + new Date().getTime()));
   }
});

I modified my solution to use a clone and give each element unique id's.

The non-jQuery version is a little more verbose (fiddle):

document.getElementById("mySelect").addEventListener("change", function(event) {
    var value = event.target.options[event.target.selectedIndex].value;
    var repeatDiv = document.getElementById("repeatDiv");

    for(var i = 0; i < value; i++) {
        var newDiv = document.createElement("div");
        newDiv.id = "repeat" + new Date().getTime();
        newDiv.innerHTML = repeatDiv.innerHTML;
        repeatDiv.parentNode.insertBefore(newDiv, repeatDiv.nextSibling); //essentially an insertAfter      
    }
}, true);

Answer 2

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

Answer 3

here is a neat demonstration:

JSFiddle demo

And here: the code used:

//NUMERATE SELECT
for (var i = 0; i < 10; i++) { // add counts in a for loop
    $('.select select').append('<option value=' + i + '>' + i + '</option>');
}
//#

//DUPLICATE PLUGIN
$.fn.duplicate = function(count, cloneEvents) {
    var tmp = [];
    for (var i = 0; i < count; i++) {
        $.merge(tmp, this.clone(cloneEvents).get());
    }
    return this.pushStack(tmp);
};

//SELECT CHANGE FUNCTION (on change get value and clone)
$('.select select').change(function(){  // on change...
    var numOfClones = $(this).val();    // get value...
    $('#holder').html('');              // empty holder if there are some old clones
    $('.repeat').duplicate(numOfClones).addClass('new').appendTo('#holder'); // duplicate; fill holder with new clones;
});

Answer 4

A simple solution if you can't use jQuery:

HTML:

<select id="repeater" onChange="updateDivs(this);">
    <option value="1"> 1 </option>
    <option value="2"> 2 </option>
    <option value="3"> 3 </option>
    <option value="4"> 4 </option>
</select>

<div id="holder">

</div>

Javascript:

function updateDivs(select){
     times=select.value;
    holder=document.getElementById("holder");
    while(holder.hasChildNodes()){
        holder.removeChild(holder.firstChild);
    }
    for(i=1; i<=times; i++){
        div = document.createElement("div");
        div.appendChild(document.createTextNode("Repeat" + i));
         holder.appendChild(div);
    }  
}

Document.write is a bad idea, you should try to modify dom tree using appendChild, removeChild etc. instead