如何根據選擇框值復制 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

首先， 不要使用document.write 。

您已經用 jQuery 標記了您的問題，所以我假設您正在使用它。

像這樣的東西應該工作（小提琴）：

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

我修改了我的解決方案以使用克隆並為每個元素提供唯一的 id。

非 jQuery 版本更冗長（小提琴）：

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

聆聽 select 元素上的“onchange”事件將為您提供修改文檔結構所需的反饋。 小提琴示例

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

這是一個簡潔的演示：

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 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 是個壞主意，您應該嘗試使用 appendChild、removeChild 等來修改 dom 樹