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