如何根据选择框值将div复制一定次数? [英] How can I replicate a div a certain number of times based on a select-box value?

问题描述

我试图制作一个脚本，当我在下拉菜单4中选择时，div重复4次.

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.

演示

推荐答案

监听select元素上的"onchange"事件将为您提供修改文档结构所需的反馈. 小提琴示例

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

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

这篇关于如何根据选择框值将div复制一定次数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！