<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>
<link rel="stylesheet" href="./css/bootstrap-select.min.css">
<script src="./js/bootstrap-select.min.js"></script>
<style type="text/css">
li {
list-style: none;
}
input, select {
width: 80px;
height: 26px;
}
label {
margin: 5px;
}
ul {
padding-left: 10px;
}
.addBtn,.remBtn {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid;
border-radius: 50%;
color: green;
border-color: green;
font-size: 20px;
line-height: 20px;
text-align: center;
transform: translateY(3px);
}
.remBtn {
color: red;
border-color: red;
}
.navBox {
float: right;
height: 30px;
transform: translateY(10px);
}
.navBox li {
float: left;
font-size: 16px;
padding: 0px 17px;
border-bottom: 3px solid transparent;
cursor: pointer;
}
.modal-header {
height: 50px;
}
.navBox li.active {
border-color: #428BCA;
}
.list .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
width: 80px;
height: 26px;
}
.list .btn {
border: 1px solid initial;
border-radius: 0px;
padding: 0;
height: 26px;
}
.list label input {
font-weight: normal;
}
</style>
</head>
<body>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框（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">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="navBox">
<ul>
<li><strong>基本信息</strong></li>
<li><strong>分间信息</strong></li>
<li><strong>户型信息</strong></li>
</ul>
</div>
</div>
<div class="modal-body">
<div class="row">
<ul class="list">
<li>
<label>名称<input type="text"></label>
<label>面积<input type="text"></label>
<label style="width: 115px;">朝向
<select class="selectpicker" title="" data-max-options-text="最多只能选择2项" multiple data-max-options="2">
<option>11111</option>
<option>武汉</option>
<option>黄冈</option>
<option>咸宁</option>
</select>
</label>
<label>窗户种类
<select>
<option></option>
<option>22222</option>
</select>
</label>
<span class="addBtn">+</span>
</li>
</ul>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var idx = 30;
var num = 0;
$(".addBtn").click(function() {
if(num >= idx) {
return
}
$(this).parents(".list").append($(`
<li>
<label>名称<input type="text"></label>
<label>面积<input type="text"></label>
<label style="width: 115px;">朝向
<select class="selectpicker" title="" multiple data-max-options-text="最多只能选择2项" data-max-options="2">
<option>11111</option>
<option>武汉</option>
<option>黄冈</option>
<option>咸宁</option>
</select>
</label>
<label>窗户种类
<select>
<option></option>
<option>22222</option>
</select>
</label>
<span class="remBtn">-</span>
</li>
`))
// 用$()包住，因为你append的是一个jquery对象
num ++
// append之后要重新初始化bootstrap-select插件
$('.selectpicker').selectpicker({})
})
$(".list").on("click",".remBtn",function() {
$(this).parent().remove();
num --
})
$(".navBox").on("click", "li", function() {
$(this).siblings().removeClass("active");
$(this).addClass("active");
})
</script>
</body>
</html>