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

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">
    docume开发者_StackOverflownt.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

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

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

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

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