<!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 { 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>