<div id="remoteAppkey" class="form-group col-md-0.5" style="display:block">
<label class="control-label"></label>
<button class="btn btn-float btn-sm btn-primary dimension-add-dlg" style="display: block" οnclick="addFunc()"><i class="fa fa-plus"></i></button>
</div>
这是“+”按钮的前端实现,按钮操作的实现在下面的代码中
var maxDimension = 6;//最多可添加元素的个数的上限 function addFunc() { var num = 0; while ($("#dimension"+num+"id").length>0){ num++; } if(num>maxDimension){ }else{ $("#card-body").append("<div id='newselect"+num+"' class='row'>" + "<div id=\"serviceName\" class=\"form-group col-md-2\" style=\"display:block\">" + "<select id='dimensionSelect"+num+"id' class='form-control' v-on:change='showMethods' ref='selectedMethod'>" + "<option value='' disabled selected>选择维度</option>" + "<#list dimensionlist as dimension>"+ "<option value='${dimension.dimensionName}' name='${dimension.dimensionName}'>" + "${dimension.dimensionName}" + "</option>" + "</#list>" + "</select>" + "</div>" + "<div id='text' class='col-md-6' style='display:block'>" + "<div class='controls'>" + "<input id='dimension"+num+"id' type='text' class='form-control' value='' />" + "</div>" + "</div>" + "<button class=\"btn btn-float btn-sm btn-primary dimension-remove-dlg \" style=\"display: block\" οnclick='deleFunc("+num+")'><i class=\"fa fa-minus\"></i></button>" + "</div>") } } function deleFunc(param) { $("#newselect"+param).remove(); }
上面是两个按钮的实现,分别是增加按钮和删除按钮
点击后面的“+”号按钮可以实现添加元素:
点击“-”号按钮可以实现删除元素。
代码中,while循环的作用是判断准备添加的元素id是否已经存在页面中,每次从0开始循环,如果存在则将id+1,不存在则添加这个id元素,这样也可以方便最后取出页面多个相同模块不同元素的输入值。