首先，id 在一个页面中只能出现一次，是唯一的，class才可以多次出现！

声明

id 为唯一属性，即一个 html 文件中只能出现一个对应的 id，class 可以使用多个；

需求实现

前端部分大到框架，小到功能，都是可以用设计模式来解决的，说白了，都是可以用 MVC 来解决的，如你的的例子：

C -> 整个 JS 逻辑；

V -> 单行条目；

M -> 填充的数据；

你其实可以把这种东西进行闭包封装，或者做成一个处理类。如：

继续完善脚本：

(function($) {

'use strict';

/**

* 组件条目解析

* 一行即一个组件条目，该构造方法

* 例：var thisRow = new AppRow();

* @return {object} 一个 jQuery 对象

*/

var AppRow = function() {

return this.rowParse(this.rowDom());

};

// HTML 结构

AppRow.prototype.rowDom = function() {

var row = '',

options = AppRow.typeChose,

optionYears = options[0].types;

// 计算期类型

row += '

';

row += '请选择';

for (var i in options) {

row += '' + options[i].name + '';

}

row += '

';

// 期间

row += '

';

// 征收方式

row += '

';

row += '请选择';

row += '查账征收';

row += '核定征收';

row += '

';

return '

' + row + '';

};

// 解析行结构，添加事件

AppRow.prototype.rowParse = function(row) {

var $row = $(row),

$typeTime = $row.find('select.type'),

$typeTypes = $row.find('.types'),

optionsData = AppRow.typeChose;

// 计算期类型

$typeTime.on('change.app', $.proxy(function(e) {

var val = $typeTime[0].value;

$typeTypes.children().remove();

$typeTypes.append(this.selectYears(val));

}, this));

return $row;

};

// 返回年度表单

AppRow.prototype.selectYears = function(type) {

var optionYears = AppRow.typeChose[0].types,

select = '',

$select = null;

// 构建表单

select += '';

select += '请选择';

for (var i in optionYears) {

select += '' + optionYears[i].years + '';

}

select += '';

// 构建成 jQuery 对象

$select = $(select);

// 事件绑定

$select.on({

// 选择事件

'change.app': $.proxy(function(e) {

var val = $select[0].value,

$sub = $select.next('.sub');

if (type <= 0) {

// 年终汇算无后续表单

return;

}

if (val === -1) {

// 未选择，则移除后续表单

$select.nextAll().remove();

return;

}

// 创建或或初始化后续表单

if (!$sub.get(0)) {

// 表单不存在则创建

$select.after(this.selectSub(type, val));

}

$sub.trigger('reset.app');

}, this),

// 重置表单

'reset.app': $.proxy(function(e) {

$select.find('option').prop('selected', false)

.eq(0)

.prop('selected', true);

})

});

return $select;

};

// 返回季度或月份表单

AppRow.prototype.selectSub = function(type, year) {

var optionData = AppRow.typeChose[type].types[year].zType_time1,

select = '',

$select = null;

if (!optionData) {

// 无数据

return;

}

// 构建表单

select += '';

select += '请选择';

for (var i in optionData) {

select += '' + optionData[i] + '';

}

select += '';

$select = $(select);

// 事件绑定

$select.on({

// 重置表单

'reset.app': $.proxy(function(e) {

$select.find('option').prop('selected', false)

.eq(0)

.prop('selected', true);

})

});

return $select;

};

// 联动数据 - zType_chose

AppRow.typeChose = [{

"name": "年终汇算",

"types": [{

"years": "2015年"

}, {

"years": "2016年"

}]

}, {

"name": "预缴-月度",

"types": [{

"years": "2015年",

"zType_time1": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]

}, {

"years": "2016年",

"zType_time1": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]

}]

}, {

"name": "预缴-季度",

"types": [{

"years": "2015年",

"zType_time1": ["第一季度", "第二季度", "第三季度", "第四季度"]

}, {

"years": "2016年",

"zType_time1": ["第一季度", "第二季度", "第三季度", "第四季度"]

}]

}];

AppRow.VERSION = '1.0.0';

// ===========================================

// 添加按钮事件绑定

var $addBtn = $('.button2'),

$rowList = $('#zType_all');

// 点击添加

$addBtn.on('click.app', function(e) {

// 或直接添加实例

$rowList.append(new AppRow());

});

})(jQuery);

解释

创建一个构造方法，用于生成一个具有交互封装效果的结构 —— 组件；

为组件添加一系列方法，并在内部创建逻辑；

闭包封装指仅 (function($){ /*code*/ })(jQuery); 中生效；

$.fn.remove可以保证页面的数据的安全性，切忌使用 $.fn.hide；

还可以生使用 AppRow.prototype.delete() 扩展删除操作等；

如果需要使用 name 做数据提交，则需使用 name="row[index][name]" 的格式，如：name="row[1]['type']"、name="row[1]['year']"、name="row[1]['sub']";

最终效果：

在线效果