[英]Generate a number of blocks according to an HTML input value using JQuery
I want to generate a number of blocks using JQuery. I try this code:我想使用 JQuery 生成多个块。我尝试使用以下代码:
$(function() {
var input = $('<select name="contracts" id="contracts">\
<option value="default">-- Choose --</option>\
<option value="service">service</option>\
<option value="supply">supply</option>\
<option value="work">work</option>\
</select>\
<div>\
<label>start date</label>\
<input type="date" name="sdate" id="sdate">\
</div>\
<div>\
<label>end date</label>\
<input type="date" name="edate" id="edate">\
</div>');
var newFields = $('');
$('#nbr').bind('blur keyup change', function() {
var n = this.value;
if (n+1) {
if (n > newFields.length) {
addFields(n);
} else {
removeFields(n);
}
}
});
function addFields(n) {
for (i = newFields.length; i < n; i++) {
var newInput = input.clone();
newFields = newFields.add(newInput);
newInput.appendTo('#myForm');
}
}
function removeFields(n) {
var removeField = newFields.slice(n).remove();
newFields = newFields.not(removeField);
}
});
But It doesn't work correctly.但它不能正常工作。 This is my HTML code:
这是我的 HTML 代码:
<label>Number Of Contracts</label>
<input type="number" name="nbr" id="nbr">
<form method="post">
<div id="myForm"></div>
<input type="submit" name="submit" value="Submit">
</form>
First It shows the number of divs I want but when I click anywhere it gives me the image below this is the image首先它显示了我想要的 div 的数量但是当我点击任何地方它给了我下面的图像这是图像
try the one below, I have added a wrapper div and in the input variable and added a parseInt because n is evaluated as string.尝试下面的方法,我在输入变量中添加了一个包装器 div 并添加了一个 parseInt,因为 n 被评估为字符串。
$(function() {
var input = $('<div><select name="contracts" id="contracts">\
<option value="default">-- Choose --</option>\
<option value="service">service</option>\
<option value="supply">supply</option>\
<option value="work">work</option>\
</select>\
<div>\
<label>start date</label>\
<input type="date" name="sdate" id="sdate">\
</div>\
<div>\
<label>end date</label>\
<input type="date" name="edate" id="edate">\
</div></div>');
var newFields = $('');
$('#nbr').bind('blur keyup change', function() {
var n = parseInt(this.value);
if(isNaN(n)) {
n = 0;
}
if (n > newFields.length) {
addFields(n);
} else {
removeFields(n);
}
});
function addFields(n) {
for (i = newFields.length; i < n; i++) {
var newInput = input.clone();
newFields = newFields.add(newInput);
newInput.appendTo('#myForm');
}
}
function removeFields(n) {
var removeField = newFields.slice(n).remove();
newFields = newFields.not(removeField);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.