Как я могу повторить div определенное количество раз на основе значения поля выбора?

Question

Я пытаюсь создать скрипт, который, когда я выбираю в раскрывающемся списке 4, div повторяется 4 раза.

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

Теперь проблема заключается в том, чтобы повторить количество раз, которое пользователь выбирает ввыпадающий список.

демо

Answer 1

Вот аккуратная демонстрация:

Демоверсия JSFiddle

А здесь: используемый код:

//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 2

Прослушивание события «onchange» в элементе select даст вам обратную связь, необходимую для изменения структуры документа. Пример скрипки

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

Сначала не используйте document.write.

Вы отметили свой вопрос с помощью jQuery, и я предполагаю, что вы используете это.

Примерно так должно работать ( 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()));
   }
});

Я изменил свое решение для использования клона и присвоил каждому элементу уникальные идентификаторы.

Версия не-jQuery немного более многословна ( 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 4

Простое решение, если вы не можете использовать 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 - плохая идея,вы должны попытаться изменить dom-дерево, используя appendChild, removeChild и т. д.