直接上代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 模态框（Modal）插件</title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var productTypeData = [{
"codeId": 10043,
"meaning": "服务",
"parentCodeValueId": null,
}, {
"codeId": 10043,
"meaning": "销售",
"parentCodeValueMeaning": null
}];
var productCatalog1Data = [{
"parentCategotyId": "-1",
"categotyName": "Callidus",
"categotyId": "101"
}, {
"parentCategotyId": "-1",
"categotyName": "MS",
"categotyId": "102"
}, {
"parentCategotyId": "-1",
"categotyName": "Offshore",
"categotyId": "103"
}, {
"parentCategotyId": "-1",
"categotyName": "Oracle",
"categotyId": "104"
}, {
"parentCategotyId": "-1",
"categotyName": "SAP",
"categotyId": "105"
}, {
"parentCategotyId": "-1",
"categotyName": "Siemens",
"categotyId": "106"
}, {
"parentCategotyId": "-1",
"categotyName": "测试产品",
"categotyId": "107"
}, {
"parentCategotyId": "-1",
"categotyName": "穆迪",
"categotyId": "108"
}, {
"parentCategotyId": "-1",
"categotyName": "夏尔",
"categotyId": "110"
}, {
"parentCategotyId": "-1",
"categotyName": "运维",
"categotyId": "111"
}, {
"parentCategotyId": "-1",
"categotyName": "test",
"categotyId": "10023"
}];
var productCatalog2Data = [{
"parentCategotyId": "101",
"categotyName": "Callidus",
"categotyId": "112"
}, {
"parentCategotyId": "102",
"categotyName": "Dynamics AX",
"categotyId": "113"
}, {
"parentCategotyId": "102",
"categotyName": "Dynamics CRM",
"categotyId": "114"
}, {
"parentCategotyId": "102",
"categotyName": "Sharepoint",
"categotyId": "115"
}, {
"parentCategotyId": "103",
"categotyName": "JAVA开发",
"categotyId": "116"
}, {
"parentCategotyId": "103",
"categotyName": "Oracle开发",
"categotyId": "117"
}, {
"parentCategotyId": "103",
"categotyName": "SAP开发",
"categotyId": "118"
}, {
"parentCategotyId": "104",
"categotyName": "Agile",
"categotyId": "119"
}, {
"parentCategotyId": "104",
"categotyName": "BI",
"categotyId": "120"
}, {
"parentCategotyId": "104",
"categotyName": "EBS ERP",
"categotyId": "121"
}, {
"parentCategotyId": "104",
"categotyName": "EBS HR",
"categotyId": "122"
}, {
"parentCategotyId": "104",
"categotyName": "Hyperion",
"categotyId": "123"
}, {
"parentCategotyId": "104",
"categotyName": "Middleware",
"categotyId": "124"
}, {
"parentCategotyId": "104",
"categotyName": "PeopleSoft",
"categotyId": "125"
}, {
"parentCategotyId": "104",
"categotyName": "SIEBLE",
"categotyId": "126"
}, {
"parentCategotyId": "104",
"categotyName": "其他",
"categotyId": "127"
}, {
"parentCategotyId": "105",
"categotyName": "BO",
"categotyId": "128"
}, {
"parentCategotyId": "105",
"categotyName": "HANA",
"categotyId": "129"
}, {
"parentCategotyId": "105",
"categotyName": "SAP ERP",
"categotyId": "130"
}, {
"parentCategotyId": "105",
"categotyName": "SAP HR",
"categotyId": "131"
}, {
"parentCategotyId": "105",
"categotyName": "SAP CRM",
"categotyId": "132"
}, {
"parentCategotyId": "106",
"categotyName": "NX",
"categotyId": "133"
}, {
"parentCategotyId": "106",
"categotyName": "SolidEdge",
"categotyId": "134"
}, {
"parentCategotyId": "106",
"categotyName": "TeamCenter",
"categotyId": "135"
}, {
"parentCategotyId": "106",
"categotyName": "Techomatix",
"categotyId": "136"
}, {
"parentCategotyId": "107",
"categotyName": "HCM",
"categotyId": "137"
}, {
"parentCategotyId": "107",
"categotyName": "HEC费控系统",
"categotyId": "138"
}, {
"parentCategotyId": "107",
"categotyName": "HLS融资租赁系统",
"categotyId": "139"
}, {
"parentCategotyId": "107",
"categotyName": "IT规划",
"categotyId": "140"
}, {
"parentCategotyId": "107",
"categotyName": "MAS ERP",
"categotyId": "141"
}, {
"parentCategotyId": "107",
"categotyName": "SRM供应商关系管理系统",
"categotyId": "142"
},{
"parentCategotyId": "108",
"categotyName": "穆迪",
"categotyId": "144"
}, {
"parentCategotyId": "109",
"categotyName": "移动应用",
"categotyId": "145"
}, {
"parentCategotyId": "109",
"categotyName": "开发",
"categotyId": "146"
}, {
"parentCategotyId": "110",
"categotyName": "BPO",
"categotyId": "147"
}, {
"parentCategotyId": "110",
"categotyName": "ICast",
"categotyId": "148"
}, {
"parentCategotyId": "110",
"categotyName": "Ifile",
"categotyId": "149"
}, {
"parentCategotyId": "111",
"categotyName": "MAS",
"categotyId": "150"
}, {
"parentCategotyId": "111",
"categotyName": "ITO",
"categotyId": "151"
}, {
"parentCategotyId": "111",
"categotyName": "Oralce客服中心",
"categotyId": "152"
}, {
"parentCategotyId": "111",
"categotyName": "SAP CCC",
"categotyId": "153"
}, {
"parentCategotyId": "104",
"categotyName": "DSTEST",
"categotyId": "10009"
}
];
$(function () {
//根据数据源创建各个button按钮
//产品类型
var $tr=$("<tr></tr>");
for(let i=0;i<Math.ceil(productTypeData.length);i++){
var $td=$("<td></td>");
var $btn=$("<button class="btn btn-default"></button>").text(productTypeData[i].meaning);
$btn.appendTo($td);
$td.appendTo($tr)
$tr.appendTo($("#productTypeTable"))
}
//一级产品
for(var j=0;j<Math.ceil(productCatalog1Data.length/4);j++){
var $tr1=$("<tr></tr>");
for(let i=j*4;i<j*4+4&&i<productCatalog1Data.length;i++){
var $td1=$("<td></td>");
var $btn1=$("<button class="btn btn-default"></button>").text(productCatalog1Data[i].categotyName);
$btn1.attr("id",productCatalog1Data[i].categotyId);
$btn1.appendTo($td1);
$td1.appendTo($tr1);
$tr1.appendTo($("#firstTable"));
}
}
var item={};
var itemList=[];
$("#showModel").click(function () {//弹出modal框并且初始化
item={};
$("#myModal").modal();
$("#error").text("");
$('#myTab a:first').tab('show');
$("#home button").removeClass('btn-primary');
$("#firstTable button").removeClass('btn-primary');
$("#secondTable button").removeClass('btn-primary');
})
$("#home button").click(function () {//给产品类型上的button添加点击事件
item.n1=$(this).text();
$("#home button").removeClass('btn-primary');
$(this).addClass("btn btn-primary");
$('#myTab li:eq(1) a').tab('show');//跳转到第二个标签页
});
$("#firstTable button").click(function () {//给一级产品上的button添加点击事件
item.n2=$(this).text();
$("#firstTable button").removeClass('btn-primary');
$(this).addClass("btn btn-primary");
var $fatherId=$(this).attr("id");
//二级产品
var filterData=productCatalog2Data.filter(function (i, index, arr) {
return i.parentCategotyId==$fatherId;
});
$("#secondTable").html("");
for(var k=0;k<Math.ceil(filterData.length/4);k++){
var $tr2=$("<tr></tr>");
for(let q=k*4;q<k*4+4&&q<filterData.length;q++){
var $td2=$("<td style="border: 0px solid transparent"></td>");
var $btn2=$("<button class="btn btn-default"></button>").text(filterData[q].categotyName);
$btn2.appendTo($td2);
$td2.appendTo($tr2);
$tr2.appendTo($("#secondTable"));
}
}
$('#myTab li:eq(2) a').tab('show');//跳转到第二个标签页
$("#secondTable button").click(function () {//给二级产品上的button添加点击事件
item.n3=$(this).text();
$("#secondTable button").removeClass('btn-primary');
$(this).addClass("btn btn-primary");
});
});
$("#submit").click(function () {//确定按钮
if(!item.n1){
$("#error").text('请选择产品类型');
}else if(!item.n2){
$("#error").text('请选择一级产品');
}else if(!item.n3){
$("#error").text('请选择二级产品');
}else{
$("#myModal").modal('hide')
itemList.push(item);
}
var newList=$.map(itemList,function (obj) {
return (obj.n1+"."+obj.n2+"."+obj.n3);
})
$("#choose").text(newList.join(";").toString());
});
});
</script>
</head>
<body>
<!-- 按钮触发模态框 -->
<button class="btn btn-success btn-lg" id="showModel">
开始演示模态框
</button>
<div id="choose"></div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="border: none;height: 15px">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 style="color: red" class="modal-title" id="error"></h5>
</div>
<div class="modal-body">
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">产品类型
</a>
</li>
<li><a href="#ios" data-toggle="tab">一级产品</a></li>
<li><a href="#jmeter" data-toggle="tab">二级产品</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<table class="table" id="productTypeTable">
</table>
</div>
<div class="tab-pane fade" id="ios">
<table class="table" id="firstTable">
</table>
</div>
<div class="tab-pane fade" id="jmeter">
<table class="table" style="border: 0px solid transparent" id="secondTable">
</table>
<div class="modal-footer">
<button type="button" class="btn btn-info" id="submit">
确定
</button>
</div>
</div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</body>
</html>效果图：
选中后如图：
注意事项：
1. 模态框里面的各个按钮是button标签，在应用到项目中的时候，点击的话可能会出现页面刷新的情况。这时候要将动态生成的button标签改成type=button的input标签；
2.由于项目需要，这里的产品类型和一级产品之间并没有级联关系；
3.这里的例子带有校验功能，即产品类型、一级产品和二级产品都是必选项，有任意一个没有选择的话弹出框左上角会有错误提示；
4.这里的级联操作没有使用远程数据做演示，性质是一样的，只不过我在级联的时候用的是js中的filter函数作为过滤，而ajax的方式是用过滤的参数作为请求下一级数据的参数；
5.其实项目中选中的效果是这样的：
6.如果发现bug或待改进的地方，希望多多指正，谢谢！