上一次说到了基于Bootstrap使用jQuery实现输入框组input-group的添加与删除 ，初始状态下只有一个输入框组，可以通过点击输入框组的右侧“+”（或自定义的文字）可以在原输入框组的下面产生一个新的输入框组，通过点击输入框组的右侧“-”（或自定义的文字）可以删除当前输入框组。
        但是这样的输入框组还存在的许多不足之处，如问题一：我们在form表单中添加了这样一个输入框组，那么我们提交表单的时候怎么提交输入框输入的内容呢？（此时上回讲到的输入框组的输入框或文本域还未定义name属性）此外，问题二：那假如我希望初始的输入框组中输入框或文本域就有值肿么办？多个输入框组的内容呈现又如何呢？
针对这样的问题，对上一次自定义的输入框组插件进行了一定的修改。对于问题一，为插件添加 field 配置设置；对于问题二，为插件添加 data 配置设置（解决该问题，有点类似采用了递归的思想，当构建出一个输入框组后，通过触发该输入框组的添加功能（添加按钮的点击事件），在当前输入框组下面产生新的输入框组，同理，直到产生与 data 属性传入的数组长度为止，此时不再触发点击事件）
       修改如下：
inputGroup-1.1.js
[javascript] view plain copy
 
  1. /** 
  2.  * Created by DreamBoy on 2016/6/4. 
  3.  */  
  4. /** 
  5.  * Created by DreamBoy on 2016/4/29. 
  6.  */  
  7. $(function() {  
  8.     $.fn.initInputGroup = function (options) {  
  9.         //1.Settings 初始化设置  
  10.         var c = $.extend({  
  11.             widget: 'input',  
  12.             add: "<span class=\"glyphicon glyphicon-plus\"></span>",  
  13.             del: "<span class=\"glyphicon glyphicon-minus\"></span>",  
  14.             field: '',  
  15.             data: []  
  16.         }, options);  
  17.   
  18.         var _this = $(this);  
  19.   　　_this.children().remove();
  20.         //添加序号为1的输入框组  
  21.         addInputGroup(1);  
  22.   
  23.         /** 
  24.          * 添加序号为order的输入框组 
  25.          * @param order 输入框组的序号 
  26.          * @param data 初始化输入框组中的数据 
  27.          */  
  28.         function addInputGroup(order) {  
  29.   
  30.             //1.创建输入框组  
  31.             var inputGroup = $("<div class='input-group' style='margin: 10px 0'></div>");  
  32.             //2.输入框组的序号  
  33.             var inputGroupAddon1 = $("<span class='input-group-addon'></span>");  
  34.             //3.设置输入框组的序号  
  35.             inputGroupAddon1.html(" " + order + " ");  
  36.   
  37.             //4.创建输入框组中的输入控件（input或textarea）  
  38.             var widget = '', inputGroupAddon2;  
  39.             if(c.widget == 'textarea') {  
  40.                 widget = $("<textarea class='form-control' style='resize: vertical;'></textarea>");  
  41.                 widget.html(c.data[order - 1]);  
  42.                 inputGroupAddon2 = $("<span class='input-group-addon'></span>");  
  43.             } else if(c.widget == 'input') {  
  44.                 widget = $("<input class='form-control' type='text'/>");  
  45.                 widget.val(c.data[order - 1]);  
  46.                 inputGroupAddon2 = $("<span class='input-group-btn'></span>");  
  47.             }  
  48.   
  49.             //5.设置表单提交时的字段名  
  50.             if(c.field.length == 0) {  
  51.                 widget.prop('name', c.widget + 'Data[]');  
  52.             } else {  
  53.                 widget.prop('name', c.field + '[]');  
  54.             }  
  55.   
  56.   
  57.             //6.创建输入框组中最后面的操作按钮  
  58.             var addBtn = $("<button class='btn btn-default' type='button'>" + c.add + "</button>");  
  59.             addBtn.appendTo(inputGroupAddon2).on('click', function() {  
  60.                 //7.响应删除和添加操作按钮事件  
  61.                 if($(this).html() == c.del) {  
  62.                     $(this).parents('.input-group').remove();  
  63.                 } else if($(this).html() == c.add) {  
  64.                     $(this).html(c.del);  
  65.                     addInputGroup(order+1);  
  66.                 }  
  67.                 //8.重新排序输入框组的序号  
  68.                 resort();  
  69.             });  
  70.   
  71.             inputGroup.append(inputGroupAddon1).append(widget).append(inputGroupAddon2);  
  72.   
  73.             _this.append(inputGroup);  
  74.   
  75.             if(order + 1 > c.data.length) {  
  76.                 return;  
  77.             }  
  78.             addBtn.trigger('click');  
  79.         }  
  80.   
  81.         function resort() {  
  82.             var child = _this.children();  
  83.             $.each(child, function(i) {  
  84.                 $(this).find(".input-group-addon").eq(0).html(' ' + (i + 1) + ' ');  
  85.             });  
  86.         }  
  87.     }  
  88. });  
index-1.1.html
[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.     <title>输入框组——改进版</title>  
  8.     <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">  
  9.   
  10.     <!--<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />-->  
  11.     <!--[if lt IE 9]>  
  12.     <script src="js/html5shiv.js"></script>  
  13.     <script src="js/respond.min.js"></script>  
  14.     <![endif]-->  
  15. </head>  
  16. <body>  
  17.     <div class="container">  
  18.         <div class="input-group-add">  
  19.         </div>  
  20.     </div>  
  21.   
  22.     <script src="js/jquery-1.11.1.min.js"></script>  
  23.     <script src="js/bootstrap.min.js"></script>  
  24.     <script src="inputGroup-1.1.js"></script>  
  25.     <script>  
  26.         $(function() {  
  27.             $('.input-group-add').initInputGroup({  
  28.                 'widget' : 'input', //输入框组中间的空间类型  
  29.                 /*'add' : '添加',  
  30.                 'del' : '删除'*/  
  31.                 'field': 'data',  
  32.                 'data' : ['haha', 'hello', 'hi', 'dj']  
  33.             });  
  34.         });  
  35.     </script>  
  36. </body>  
  37. </html>  
       此时，在不设置 data 属性或data属性设置为空数组 []，将与原来显示结果无异。设置由于设置了field属性，所以此时输入框或文本框的name属性为field属性的值，如：
       如果没有设置 field 属性的话，默认为 inputData[] 或 textarea[] 对应设置 input 或 textarea控件。
       当设置了 data 属性后，并且 data 不为空数组时，初始化界面后如下：（设置要的数组将 放入 输入框组 中）
       同样能正常使用 “添加”和“输出”功能。
 
https://blog.csdn.net/qq_15096707/article/details/51585758