Jquery mobile中的Jquery动态字段
Jquery dynamic fields in jquery mobile
我正在创建一个简单的动态表单,当用户按下2时,将显示两个字段,如果按下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>');
}
}
}
请帮助
每次用户通过$('.row').html('');
输入数字时清除您的html row
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>
相关文章:
- jQuery Wan Spinner插件的多个字段
- 使用jquery将输入字段转换为文本
- 如何验证日期、月份和日期的3个独立输入字段;年使用jquery或javascript
- 将值传递给jquery创建的输入字段
- JQuery:当其他输入字段的值发生更改时更改值
- JQuery获取隐藏字段的值
- 使用jQuery'生成输入字段;s追加
- 当所有输入文本字段都为空时,禁止表单提交,但当jquery中的任何字段不为空时允许提交
- 如果值为0,则Jquery formvalidation是必填字段
- 无法根据用户在编辑窗口中的输入显示/隐藏jtable jquery字段
- jQuery字段验证-是否为空,以及正确的值
- jQuery-字段值和比较
- 根据在jQuery字段中输入的数量显示表单的不同部分
- 在数组中存储 JQuery 字段与仅存储选择字符串相比如何
- Javascript jQuery:字段集上的regexp
- 动态生成jQuery字段的id
- 最有效的jquery字段验证方法
- jQuery字段选择replacesselection不't为我工作
- 使用JQuery:字段名称读取JSON
- Php中不能使用Jquery字段