jQuery增加和减少表单元素
jQuery增加和减少表单元素
huiyingzzx1018 发表于1年前
jQuery增加和减少表单元素
  • 发表于 1年前
  • 阅读 11
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

摘要: 最近做的一个有关投票的功能,可以增加和删除投票选项,这时候就需要动态增加和减少表单元素。

主要使用append方法

function add(){
        var max = parseInt($("#maxnum").val());
        var maxnext = max + 1;
        var html = '<div  id="optionGroup'+maxnext+'"><div class="form-group"> <label class="col-md-2 control-label"><fmt:message key="activityNews.vote.optionNew"/></label> <div class="input col-md-6"> <input type="text" name="voteOption" value="" class="form-control" maxlength="100" id="text'+maxnext+'"/> <a href="javascript:void(0);" data-original-title="删除" onclick="javascript:minus('+maxnext+',-1);" style="position: absolute;right:15px;top:7px;"><i class="fa fa-minus-square"></i></a> </div>  <a href="javascript:void(0);" class="btn btn-xs btn-default" data-original-title="增加" id="addbutton'+maxnext+'" onclick="javascript:add();" style="height: 20px"> <i class="fa fa-plus-square"></i> </a>  </div> <div class="form-group" style="clear: both;" > <label class="col-md-2 control-label"><fmt:message key="activityNews.picUrl" /></label> <div class="input col-md-6"> <div class="add-file"> <span class="button"><input type="file" name="option_pic" onchange="this.parentNode.nextSibling.value = this.value"> <fmt:message key="common.attachImage" /></span><input type="text" placeholder="请上传 640 * 320 的图片" class="form-control required" readonly="readonly"> </div> </div> </div> </div>';
        //$("#addbutton"+max).css('display','none');
        $('#option2').append(html);
        $("#maxnum").val(maxnext);
        for(var i = max; i > 0; i--){
            if($("#text"+i).val() != undefined){
                $("#addbutton"+i).css('display','none');
                break;
            }
        }
    }
function minus(num,id){
        if(num == 1 || num == 2){
            return false;
        }
        var pre = num - 1;
        var max = parseInt($("#maxnum").val());
        if(id != -1){
            var html = '<input type="hidden" name="voteOptionDeleteId" value="'+id+'"/>';
            $("#optionDelete").append(html);
        }
        $("#optionGroup"+num).remove();
        
            for(var i = max; i > 0; i--){
                if($("#text"+i).val() != undefined){
                    $("#addbutton"+i).css('display','inline');
                    break;
                }
            }
            
    }

 

共有 人打赏支持
粉丝 3
博文 2
码字总数 564
×
huiyingzzx1018
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: