展现形式一：
html,样式根据自己需要的进行更改
<div id="InputsWrapper"> </div> <div class="col-sm-12 form-group"> <label class="col-sm-2 control-label"></label> <div class="col-sm-3"> <a id="AddMoreFileBox" style="color: #27ae60;"><span class="glyphicon glyphicon-plus"></span>添加选项</a> </div> </div>
<script>
$(document).ready(function() { /*---------------addinput-----------*/ var MaxInputs = 12; //maximum input boxes allowed var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID var AddButton = $("#AddMoreFileBox"); //Add button ID var x = $("#InputsWrapper .option").length; //initlal text box count var FieldCount=1; //to keep track of text box added $(AddButton).click(function (e) //on add input button click { x = $("#InputsWrapper .option").length; FieldCount = x + 1; if(x <= MaxInputs) //max input box allowed { FieldCount++; //text box added increment //add input box var optionnum =FieldCount+1; $(InputsWrapper).append('<div class="col-sm-12 form-group form-group-sm option"><label class="col-sm-2 control-label"></label><div class="col-sm-3"><input class="form-control input-sm" type="text" name="mytext[]" id="field_'+ FieldCount +'" value="" maxlength="25" placeholder="投票选项'+ optionnum +'" /></div><div class="col-sm-1 vote-del"><button class="btn btn-xs delbutton">删除</button></div></div>'); //x++; //text box increment if(x == 12) //添加按钮 $("#AddMoreFileBox").css("display","none"); else { //添加按钮消失 $("#AddMoreFileBox").css("display","block");} } return false; }); $("body").on("click",".vote-del", function(e){ //user click on remove text if( x >= 0 ) { $(this).parent('div').remove(); //remove text box x--; //decrement textbox //添加按钮出现 $("#AddMoreFileBox").css("display","block"); var i = 3; $("#InputsWrapper .option").each(function(){ $(this).find('input').attr('placeholder','投票选项'+i); i++; }) } return false; }) });
</script>
展现形式二
html,样式根据自己需要的进行更改 <div id="InputsWrapper">
</div>
<div> <a id="AddMoreFileBox" class="pull-right mtb" style="color: #27ae60;"><span class="glyphicon glyphicon-plus"></span>添加选项</a>
</div>
<script>
$(document).ready(function() { /*---------------addinput-----------*/ var MaxInputs = 12; //maximum input boxes allowed var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID var AddButton = $("#AddMoreFileBox"); //Add button ID var x = $("#InputsWrapper input").length; //initlal text box count var FieldCount=1; //to keep track of text box added $(AddButton).click(function (e) //on add input button click { x = $("#InputsWrapper input").length; FieldCount = x + 1; if(x <= MaxInputs) //max input box allowed { FieldCount++; //text box added increment //add input box var optionnum =FieldCount+1; $(InputsWrapper).append('<div class="input-group mt-10"><input class="form-control input-sm" type="text" name="mytext[]" id="field_'+ FieldCount +'" value="" maxlength="25" placeholder="投票选项'+ optionnum +'" /><span class="input-group-addon vote-del"><span class="glyphicon glyphicon-remove"></span></span></div>'); //x++; //text box increment if(x == 12) //添加按钮 $("#AddMoreFileBox").css("display","none"); else { //添加按钮消失 $("#AddMoreFileBox").css("display","block");} } return false; }); $("body").on("click",".vote-del", function(e){ //user click on remove text if( x >= 0 ) { $(this).parent('div').remove(); //remove text box x--; //decrement textbox //添加按钮出现 $("#AddMoreFileBox").css("display","block"); var i = 3; $("#InputsWrapper input").each(function(){ $(this).attr('placeholder','投票选项'+i); i++; }) } return false; }) });
