<!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>
<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;
}
.list input,.list 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;
}
.pageActive {
display: block!important;
}
.pageTwo, .pageThree, .pageOne {
display: none;
}
</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 class="active"><strong>基本信息</strong></li>
<li><strong>分间信息</strong></li>
<li><strong>户型信息</strong></li>
</ul>
</div>
</div>
<div class="modal-body">
<div class="pageOne pageActive">
<h1>这是基本信息页</h1>
</div>
<div class="pageTwo 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 value="1">11111</option>
<option value="武汉">武汉</option>
<option value="黄冈">黄冈</option>
<option value="咸宁">咸宁</option>
</select>
<input type="hidden" value="黄冈,武汉" class="aa">
</label>
<label>窗户种类
<select>
<option></option>
<option>22222</option>
</select>
</label>
<span class="addBtn">+</span>
</li>
<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 value="1">11111</option>
<option value="武汉">武汉</option>
<option value="黄冈">黄冈</option>
<option value="咸宁">咸宁</option>
</select>
<input type="hidden" value="武汉,1" class="aa">
</label>
<label>窗户种类
<select>
<option></option>
<option>22222</option>
</select>
</label>
<span class="addBtn">+</span>
</li>
</ul>
</div>
<div class="pageThree">
<h1>这是户型信息页</h1>
</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">
$(function(){
$('.selectpicker').selectpicker('val', ['武汉','黄冈']).trigger("change");
init()
})
var idx = 30;
var num = 0;
var key = null;
var arr = ['武汉','黄冈']
function init() {
var seleIndex = document.getElementsByClassName('selectpicker');
for(var i = 0; i<seleIndex.length ; i++){
var arr = $(".aa")[i].value.split(",")
$(seleIndex[i]).selectpicker('val', arr).trigger("change");
$('.selectpicker').selectpicker({})
console.log(arr)
}
}
$(".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 value="1">11111</option>' +
'<option value="2">武汉</option>' +
'<option value="3">黄冈</option>' +
'<option value="4">咸宁</option>' +
'</select>' +
'<input type="hidden" value="blue, yellow">' +
'</label>' +
'<label>窗户种类' +
'<select>' +
'<option></option>' +
'<option>22222</option>' +
'</select>' +
'</label>' +
'<span class="remBtn">-</span>' +
'</li>'
))
// 用$()包住，因为你append的是一个jquery对象
num ++
// append之后要重新初始化bootstrap-select插件
$('.selectpicker').selectpicker({})
$('.selectpicker').selectpicker('val', arr).trigger("change");
check($('.list').children("li:last-child").find('.selectpicker'),arr)
$('.selectpicker').selectpicker({})
})
function check(el, arr) {
el.selectpicker('val', arr).trigger("change");
}
$(".list").on("click",".remBtn",function() {
$(this).parent().remove();
num --
})
function hidSho(el) {
el.addClass("pageActive")
el.siblings().removeClass("pageActive")
}
$(".navBox").on("click", "li", function() {
$(this).siblings().removeClass("active");
$(this).addClass("active");
var num = $(this).index();
if(num == 0) {
hidSho($(".pageOne"))
}else if (num == 1) {
hidSho($(".pageTwo"))
}else if (num == 2){
hidSho($(".pageThree"))
}
})
/* $('#name').selectpicker('refresh');
$('#name').selectpicker('render');*/
// 这两个属性是ajax请求数据渲染bootstrap-select初始化
</script>
</body>
</html>
1627
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
