下拉表单
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<link rel="stylesheet" href="dist/css/bootstrap.css"/>
<link rel="stylesheet" href="dist/css/font-awesome.min.css"/>
<script src="dist/js/jquery.js"></script>
<script src="dist/js/bootstrap.js"></script>
<style>
body{margin:0;padding: 0;box-sizing: border-box;}
#address{
width:200px;
margin:10px 0 0 100px;
}
#con{
width: 550px;
border:1px solid #dadada;
box-shadow: 0 0 5px;
/*position: absolute;*/
/*top:85px;*/
/*left:100px;*/
overflow: hidden;
display: none;
}
.kuang{
width: 300px;
height:100px;
border:1px solid #000;
margin: 0 0 0 100px;
}
</style>
</head>
<body>
<div class="container">
<h3>点击body或关闭按钮，把数据提交到div中</h3>
<div class="kuang"></div>
<h3>下拉表单</h3>
<button type="button" class="btn btn-info dropdown-toggle" name="address" id="address" aria-haspopup="true" aria-expanded="false">
请选择 <span class="caret"></span>
</button>
<div id="con">
<div class="row" style=" background: #E88E22;height:30px;line-height: 30px;margin-bottom: 5px;">
<div class="col-xs-2 col-md-offset-5">基本信息</div>
</div>
<div class="row">
<form id="form" role="form" class="form-horizontal" action="javascript:alert('验证成功,可以提交.');" method="post">
<div class="form-group">
<label class="col-xs-2 control-label" >编号</label>
<div class="col-xs-3">
<input type="text" name="bianhao" class="form-control" id="id" placeholder="请输入...">
</div>
<label class="col-xs-2 control-label" >登录名</label>
<div class="col-xs-3">
<input type="text" name="dlm" class="form-control" id="loginName" placeholder="请输入...">
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label" for="mj" >密级</label>
<div class="col-xs-3">
<!-- <input type="text" name="secret" class="form-control" id="secret" placeholder="请输入...">-->
<select class="chosen-select form-control" id="mj" name="mj" data-placeholder="请选择">
<option value="非涉密">非涉密</option>
<option value="一般涉密">一般涉密</option>
<option value="中级涉密">中级涉密</option>
<option value="高级涉密">高级涉密</option>
</select>
</div>
<label class="col-xs-2 control-label" >性别</label>
<div class="col-xs-3">
<!-- <input type="text" name="id" class="form-control" id="e-sex" placeholder="请输入...">-->
<label class="radio-inline"><input type="radio" name="sex" value="男" />男 </label>
<label class="radio-inline"><input type="radio" name="sex" value="女" />女 </label>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">手机</label>
<div class="col-xs-3">
<input type="text" name="mobilePhone" class="form-control" id="mobilePhone" placeholder="请输入...">
</div>
<label class="col-xs-2 control-label">邮箱</label>
<div class="col-xs-3">
<input type="text" name="e-mail" class="form-control" id="e-mail" placeholder="请输入...">
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">是否主管</label>
<div class="col-xs-3">
<!-- <input type="text" name="isManager" class="form-control" id="isManager" placeholder="请输入...">-->
<select class="form-control" name="sf" id="" data-placeholder="请选择">
<option value="是">是</option>
<option value="否">否</option>
</select>
</div>
<label class="col-xs-2 control-label">排序</label>
<div class="col-xs-3">
<input type="text" name="sort" class="form-control" id="sort" placeholder="请输入...">
</div>
</div>
</form>
<div class="btn-group" style="float: right;margin-right: 20px;">
<button class="btn btn-primary" id="closeBtn">提交</button>
<button class="btn btn-primary" id="restBtn" >重置</button>
</div>
</div>
</div>
</div>
<script src="js/jquery.bgiframe.js"></script>
<script src="js/index.js"></script>
<script>
//调用插件
$(function(){
$("#address").myselect("#con");
});
//插件
/**
* Created by think on 2017/6/29.
*/
$.fn.myselect=function(targetid){//this=>$("#address")
var op=false;//弹出层当前的状态
var _seft=this;
// console.log(_seft.selector.substring(1));打印结果：address
var targetId=$(targetid);
//点击input框弹出下拉菜单
this.click(function(){
var otop=$(this).offset().top+ $(this).outerHeight(false);//true表示计算margin在内
var oleft=$(this).offset().left;
targetId.bgiframe();
targetId.slideDown().css({ "position": "absolute", "top": otop + "px", "left": oleft + "px" });
op=true;
});
//除了自己和弹出框点击其他的都将关闭下拉框
$(document).click(function (event) {
console.log(targetid.substring(1));
if (event.target.id != _seft.selector.substring(1)) {
if(op){
console.log("zhixing");
targetId.slideUp();
data();
}
}
});
targetId.click(function (e) {
e.stopPropagation();
});
//点击关闭按钮关闭
targetId.find("#closeBtn").click(function(){
targetId.slideUp();
data();
});
//点击重置按钮清空表单内容
targetId.find("#restBtn").click(function(){
$("input[type='radio']").attr("checked",false);
targetId.find("#form").find("input[type!='radio'],select").each(function(){
this.value="";
});
});
function data(){
var json=JSON.stringify(GetJsonData());
$(".kuang").html(json);
}
//获取页面from内容的json数组
function GetJsonData() {
var json = {}//定义一个json的对象
targetId.find('input,select').each(
function () {
json[this.name] = this.value
});
return json;//返回的是json对象，
}
}
</script>
</body>
</html>
扬人之长，谅人之过！
