如何根据选择框值复制div一定次数？
我正在尝试创建一个脚本，当我在下拉列表4中选择时，div重复4次。
repeat document.write('') for (var i = 0; i < 10; i++) { document.write('' + i + ''); } document.write('')
现在问题是重复用户在下拉列表中选择的次数。
演示
收听select元素上的“onchange”事件将为您提供修改文档结构所需的反馈。 小提琴的例子
HTML
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);
首先， 不要使用document.write 。
你用jQuery标记了你的问题，所以我假设你正在使用它。
像这样的东西应该工作（ 小提琴 ）：
HTML：
repeat
使用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);
这是一个简洁的示范：
JSFiddle演示
在这里：使用的代码：
//NUMERATE SELECT for (var i = 0; i < 10; i++) { // add counts in a for loop $('.select select').append(''); } //# //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; });
一个简单的解决方案，如果你不能使用jQuery：
HTML：
使用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树