jquery实现动态添加多个二级联动菜单的方法

以下是从我们的CDN系统的添加页面规则部分截取出来的代码

JS部分

<script>
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
var rows = document.getElementById("dnsdetail").rows.length;
if (rows > 2) {
document.getElementById("dnsdetail").deleteRow(i);
} else {
alert("至少要有一个项目。");
}
}
function addRow(){
defcells++;
var newTr = dnsdetail.insertRow();
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
newTd0.innerHTML = '<span><select class= "add_c form-control selectpicker" name="type[]" id="" > <option value="">请选择项目</option></select><select class="form-control selectpicker" name="proxied[]" id=""><option value="">请选择配置</option></select></span> ';
newTd1.innerHTML = '';
newTd2.innerHTML = '<input class="btn btn-default" type="button" value="删除" onclick="deleteRow(this)">';
$(document).ready(function(){  
  $('.add_c').ready(function(){  
  var se=['总是在线','浏览器缓存过期时间','源服务器缓存控制','缓存欺诈防御','可疑爬虫浏览器检测','页面用户数据保护','SSL加密方式','抗攻击级别','缓存级别','CDN缓存过期时间','IP定位信息','邮件地址防采集','关闭自动安装APP','关闭安全防御'];  
    
  var cc='';  
  for(var i=0;i<14;i++){  
    var cc=cc+'<option value="'+se[i]+'">'+se[i]+'</option>' }  
    $('.add_c').append(cc);  
    $('.add_c').siblings().append('<option value="">选择配置</option>')  
  })  
  $('.add_c').change(function(){  
    var set=[  
['选择配置'], 
    ['on','off'],  
    ['两小时','三小时','四小时','五小时','八小时','12小时','16小时','20小时','1天','2天','3天','4天','5天','8天','16天','24天','1月','2月','6月','1年'],  
    ['开启','关闭'],  
    ['开启','关闭'],  
    ['开启','关闭'],  
    ['开启','关闭'],  
    ['关闭','半程','简易全程','完整全程'],  
    ['半关闭','低','中','高','被攻击中'],  
    ['不缓存','基础静态文件','排除动态文件','标准缓存','全部缓存'],  
    ['两小时','三小时','四小时','五小时','八小时','12小时','16小时','20小时','1天','2天','3天','4天','5天','8天','16天','24天','1月','2月','6月','1年'],  
    ['开启','关闭'],  
    ['开启','关闭'],
['已启用'],
['已启用']  
  ]  
    var aa=$(this).index('.add_c')  
    var bb=$('.add_c').eq(aa).find('option:selected').index()  
    var dd=''  
    for(var j=0;j<set[bb].length;j++){  
      if(set[bb].length<2){dd='<option value="'+set[bb][0]+'">'+set[bb][0]+'</option>'}  
        else{dd=dd+'<option value="'+set[bb][j]+'">'+set[bb][j]+'</option>'}  
    }  
    $('.add_c').eq(aa).siblings().empty().append(dd);  
  })  
})  
}
</script>
<script>var defcells = 5;</script>

HTML部分

<div class="panel-body">
<form method="POST" action="" class="form-inline">
<a class="btn btn-default" target="_parent" href="domainlist.php">返回</a>
<a class="btn btn-default" target="_parent" href="javascript:addRow();">添加</a>
<button type="submit" name="submit" class="btn btn-default">提交</button>
<br>
<table class="table table-striped" id="dnsdetail">
<thead>
<tr>
<th>类型</th>
<th>记录</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<?php echo $recordall;?>
</tbody>
</table>
<a class="btn btn-default" target="_parent" href="domainlist.php">返回</a>
<a class="btn btn-default" target="_parent" href="javascript:addRow();">添加</a>
<button type="submit" name="submit" class="btn btn-default">提交</button>
</form>
</div>