我正在创建一个简单的动态表单,当用户按 2 时,将显示两个字段,如果他按 1,将显示 1 个字段
面临的问题: 如果用户输入 1 ,则显示 1 个字段,但如果用户删除 1 并按 2 而不是 1,则显示 3 个字段
HTML 代码
<label for="textarea2b">Quantity</label>
<input type="number" name="name2" id="quantitypickup" onkeyup="showdimension()" value="" data-clear-btn="true" placeholder="">
<div id="dimshow" class="row">
</div>
JS代码
function showdimension() {
var q = $("#quantitypickup").val();
var r = $("#dimshow");
if (q == "0" || q == "" || q == null) {
r.hide();
r.html('');
} else {
r.show();
for (var i = 0; i < q; i++) {
r.append(' <div class="col-xs-6"><label>Item Name ' + (i + 1) + '</label><input type="text" name="name2" id="itemname" onkeyup="" value="" data-clear-btn="true" placeholder=""></div><div class="col-xs-6"><div class="row"><div class="col-xs-4"><label>Length</label><input type="number" name="name2" onkeyup="" value="" data-clear-btn="true" placeholder=""><label style="text-align:center">inches</label></div><div class="col-xs-4"><label>Width</label><input type="number" name="name2" onkeyup="" value="" data-clear-btn="true" placeholder=""><label style="text-align:center">inches</label></div><div class="col-xs-4"><label>Height</label><input type="number" name="name2" value="" data-clear-btn="true" placeholder=""><label style="text-align:center">inches</label></div></div> </div></div>');
}
}
}
请帮忙
最佳答案
清除您的 html row
每次用户通过 $('.row').html('');
输入数字时
function showdimension() {
$('.row').html('');
var q = $("#quantitypickup").val();
var r = $("#dimshow");
if (q == "0" || q == "" || q == null) {
r.hide();
r.html('');
} else {
r.show();
for (var i = 0; i < q; i++) {
r.append(' <div class="col-xs-6"><label>Item Name ' + (i + 1) + '</label><input type="text" name="name2" id="itemname" onkeyup="" value="" data-clear-btn="true" placeholder=""></div><div class="col-xs-6"><div class="row"><div class="col-xs-4"><label>Length</label><input type="number" name="name2" onkeyup="" value="" data-clear-btn="true" placeholder=""><label style="text-align:center">inches</label></div><div class="col-xs-4"><label>Width</label><input type="number" name="name2" onkeyup="" value="" data-clear-btn="true" placeholder=""><label style="text-align:center">inches</label></div><div class="col-xs-4"><label>Height</label><input type="number" name="name2" value="" data-clear-btn="true" placeholder=""><label style="text-align:center">inches</label></div></div> </div></div>');
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="textarea2b">Quantity</label>
<input type="number" name="name2" id="quantitypickup" onkeyup="showdimension()" value="" data-clear-btn="true" placeholder="">
<div id="dimshow" class="row">
</div>
关于javascript - jquery mobile 中的 jquery 动态字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36663689/