Sham@双目瞿最近Sham用后端发布表单问卷的时候，发现原来的功能不够好，于是今天抽空把表单项功能丰富调整了下，现在可以实现：
1. 点击+号，在下方插入一行表单项；
2.点击-号，删除当前表单项；
3. 点击向上箭头，将当前行上移一行；
4. 通过下拉菜单选中的值，来判断改变当前项内特定的样式等；
以上功能是基于jQuery实现的，特此记录备忘，效果浏览地址：点我浏览效果
完整代码如下（里面用到了layui，主要就是用到了样式和下拉菜单，可根据实际需要来确定用不用）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="js/layui/css/layui.css" media="all">
<script src="js/jquery.min.js"></script>
<script src="js/layui/layui.js" charset="utf-8"></script>
<title>js/jquery添加删除表单项</title>
</head>
<body>
<form class="layui-form" action="">
<div class="layui-form-item" style="position:relative;z-index:99999;" >
<fieldset class="layui-elem-field layui-field-title">
<legend style="font-weight:bolder;">添加&删除&移动表单项</legend>
</fieldset>
<div class="layui-input-block" style="background:#eee;width:1000px;" id="addonlist">
<div style="width:30px;display:inline-block;margin-left:10px;">添加</div>
<div style="width:100px;display:inline-block;margin:10px;">表单组件类型</div>
<div style="width:60px;display:inline-block;margin:10px;">数量限制</div>
<div style="width:150px;display:inline-block;margin:10px;">表单组件名称</div>
<div style="width:450px;display:inline-block;margin:10px;">表单组件值（单选/多选请在此输入，并用英文逗号,分隔）</div>
<div style="width:30px;display:inline-block;margin-left:10px;text-align:center;">删除</div>
<div style="width:30px;display:inline-block;margin-left:10px;text-align:center;">上移</div>
<div style='display:block;width:1000px;margin:5px;'>
<div class='layui-form-item' style='width:100px;display:inline-block;'>
<select name='n_addontype[]' class='n_addon' style='width:100px;' lay-filter='addontype'>
<option value=''></option>
<option value='input'>输入框</option>
<option value='picker'>下拉选项</option>
<option value='radios'>单选项</option>
<option value='checkbox'>多选项</option>
<option value='grade'>评分</option>
<option value='votes'>评奖</option>
<option value='v-votes'>视频投票</option>
<option value='textarea'>多行输入框</option>
<option value='imgupload'>允许上传图片（目前最多2张）</option>
</select>
</div>
<div id='choicelimit' style='width:60px;display:inline-block;margin:5px 10px;'>
<input class='layui-input choicelimit n_addon' type='text' disabled value='' name='choicelimit[]' style='width:60px;background:#eee;'>
</div>
<div style='width:150px;display:inline-block;margin:5px 10px;'>
<input class='layui-input n_addon' type='text' value='' name='n_addondesc[]' style='width:150px;'>
</div>
<div style='width:450px;display:inline-block;margin:5px 10px;'>
<input class='layui-input n_addon' type='text' value='' name='n_addonchoice[]' placeholder='活动选择清单(多个选择时用英文逗号,来分隔)' style='width:450px;'>
</div>
<input class='layui-input' type='button' value='+' onclick='addOrRemove(this)' style='width:30px;float:left;margin:5px 10px;padding-right:20px;background:#5FB878;color:#fff;font-weight:bolder'>
</div>
</div>
</div>
</form>
<script type='text/javascript'>
/**通过下拉菜单选中的值来改变指定元素的样式等**/
layui.use('form', function(){
var form = layui.form;
form.on("select(addontype)", function(data){
console.log(data.value)
var choicelimit = $(this).parent().parent().parent().parent().children('#choicelimit').children('.choicelimit');
if(data.value == "checkbox" || data.value == "v-votes" || data.value == "imgupload"){
choicelimit.attr('disabled',false );
choicelimit.attr('style',"background:#fff;" );
}else{
choicelimit.attr('disabled',"disabled" );
choicelimit.attr('style',"background:#eee;" );
}
});
});
/**点击添加删除input**/
function addOrRemove(btn) {
var add = btn.value == "+";
var div = btn.parentNode,divs = btn.parentNode, list = div.parentNode;
var rmv = "<i class='layui-icon layui-icon-up remove' style='float:right;margin:15px 20px 10px 10px;' onclick='moveup(this)'></i><input class='layui-input remove' type='button' value='-' onclick='addOrRemove(this)' style='width:30px;float:right;margin:5px 10px 5px 5px;padding-right:20px;background:#5FB878;color:#fff;font-weight:bolder'>";
console.log($('#addonlist').children().length)
if (add) {
div = div.cloneNode(true);
$(div).find('.n_addon').val('');
$(div).find('.n_addons').val('');
divs.after(div);
if($(div).children('.remove').length==0){
$(div).append(rmv);
}
}
else list.removeChild(div);
layui.use('form', function() {
var form = layui.form;
form.render();
});
};
/**上移当前项**/
function moveup(btn) {
var div = btn.parentNode, Pre = $(div).prev();
var mv = "<i class='layui-icon layui-icon-up remove' style='float:right;margin:15px 20px 10px 10px;' onclick='moveup(this)'></i><input class='layui-input remove' type='button' value='-' onclick='addOrRemove(this)' style='width:30px;float:right;margin:5px 10px 5px 5px;padding-right:20px;background:#5FB878;color:#fff;font-weight:bolder'>";
if($(Pre).children('.remove').length==0){
Pre.append(mv);
$(div).children('.remove').remove();
}
Pre.insertAfter(div);
};
</script>
</body>
</hteml>
评论前必须登录！
注册