<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>新建</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/datepicker.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-select.css">
<script src="js/jquery-2.2.4.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/bootstrap-select.js"></script>
<script type="text/javascript">
$(window).on('load', function () {
$('.selectpicker').selectpicker({
'selectedText': 'cat'
});
});
</script>
<style type="text/css">
.center {
width: auto;
display: table;
margin-left: auto;
margin-right: auto;
}
.text-center {
text-align: center;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" style="background-color:#D3D3D3">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首页</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="index.html">
新建
<span class="sr-only">(current)</span>
</a>
</li>
<li>
<a href="#">订单管理</a>
</li>
<li>
<a href="#">添加初始库存</a>
</li>
<li>
<a href="#">产品管理</a>
</li>
<li>
<a href="#">部门管理</a>
</li>
</ul>
</div>
</nav>
<br/>
<br/>
<br/>
<form role="form">
<div class="form-group col-sm-12">
<label for="name">单号:</label>
<input type="text" class="form-control" id="name"
placeholder="请输入单号"></div>
<div class="form-group col-sm-12">
<label for="name">日期:</label>
<input type="text" class="datepicker form-control" placeholder="请选择日期" />
</div>
<div class="form-group col-sm-12">
<label for="name">发货部门:</label>
<select class="form-control">
<option value="">铸造车间</option>
<option value="">迪沙线</option>
<option value="">变形库</option>
<option value="">铸件库</option>
<option value="">焊补库</option>
</select>
</div>
<div class="form-group col-sm-12">
<label for="name">领用部门:</label>
<select class="form-control">
<option value="">铸造车间</option>
<option value="">迪沙线</option>
<option value="">变形库</option>
<option value="">铸件库</option>
<option value="">焊补库</option>
</select>
</div>
<br/>
<div class="row">
<div class="col-xs-4 form-group">
<input type="text" class="form-control" id="name"
placeholder="经办人"></div>
<div class="col-xs-4 form-group">
<select class="form-control col-sm-4 selectpicker" multiple data-live-search="true" data-size="5">
<option value="">890890r9</option>
<option value="">fewgew112</option>
<option value="">321412frwe</option>
<option value="">fewkjimofew</option>
<option value="">fenknimo8</option>
<option value="">890890r9</option>
<option value="">fewgew112</option>
<option value="">321412frwe</option>
<option value="">fewkjimofew</option>
<option value="">fenknimo8</option>
<option value="">890890r9</option>
</select>
</div>
<div class="col-xs-4 form-group">
<input type="text" class="form-control" id="name"
placeholder="数量"></div>
</div>
</form>
<a href="#" id="name1" class="btn btn-info">增加一组产品-数量</a>
<div id="inputs" class="col-xs-4 form-group">
<div >
<input type="text" class="form-control" name="mytext[]" id="field_1" placeholder="经办人"/>
<a href="#" class="removeclass">删除</a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var MaxInputs = 100;
var InputsWrapper = $("#inputs");
var AddButton = $("#name1");
var x = InputsWrapper.length;
var count=1;
$(AddButton).click(function (e)
{
if(x <= MaxInputs)
{
count++;
$(InputsWrapper).append('<div><input type="text" name="mytext[]" id="field_'+ count +'" placeholder="经办人" class="form-control"/><a href="#" class="removeclass">删除</a></div>');
x++;
}
return false;
});
$("body").on("click",".removeclass", function(e){
if( x > 1 ) {
$(this).parent('div').remove();
x--;
}
return false;
})
});
</script>
</body>
</html>
