下拉列表框
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>武汉市预约献血登记表</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
div ,ul ,li, span, table, h1~h6,{
margin:0px; padding:0px;
}
input{
background-color:#eeeee;
}
i{
color:#FF9900;
}
label{
margin-bottom: 10px;
}
small{
font-size:13px;
font-weight:600px;
}
.xy-navigation{
background-color:#00ab9f;
}
.xy-navigation ul{
list-style:none;
margin-bottom: 0px;
padding-left: 0px;
}
.xy-navigation ul li{
height:50px;
line-height:50px;
}
.xy-navigation ul li img{
width:10px;
height:20px;
}
.xy-navigation-txt{
font-size:16px;
font-weight:800;
color:#ffffff;
text-align:center;
padding-left:0px;
}
.xy-nagation-txt{
font-size:10px;
color:#999999;
}
.xy-nagation-txt span{
padding-left: 0px;
padding-right: 0px;
margin-top: 10px;
}
.xy-subtxt{
margin-top: 14px;
color:#808080;
font-size:13px;
font-weight:600px;
}
.su-form-content{
margin-left: 15px;
margin-right: 15px;
margin-top: 20px;
}
.defaule-radius{ border-radius:10px;}
.su-dropdown{
border:1px solid #dfdfdf;
border-radius:10px;
}
.su-dropdown button{
width:100%;
text-align:left;
color:#999999;
font-size:13px;
}
.su-radio-all{
border:1px solid #dfdfdf;
border-radius:10px;
background-color:#eeeeee;
}
.su-radio-all input{
margin-left:15px;
}
.su-radio-all div{
padding-top:7.5px;
padding-bottom:7.5px;
padding-left: 10px;
margin-top: 0px;
margin-bottom: 0px;
}
.radio-women{
padding-top:7.5px;
padding-bottom:7.5px;
padding-left: 10px;
margin-top: 0px;
margin-bottom: 0px;
border-top:1px solid #dfdfdf;
}
.su-dropdown-date{
width:100%;
text-align:left;
color:#999999;
font-size:13px;
}
.su-dropdown-date button{ width:100%;border-top:1px solid #dfdfdf; border-radius:10px;}
.drop-date{
width:100%;
margin-top: 0px;
padding-top: 0px;
padding-bottom: 0px;
border-bottom:0px;
}
li{
border-bottom:1px solid #eeeeee;
}
.dropdown-menu > li > div{
clear:both
color:#333;
font-weight:400;
line-height:1.42857;
padding:3px 20px;
white-space:nowrap;
}
*::before, *::after {
box-sizing: border-box;
}
*::before, *::after {
box-sizing: border-box;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
border-top: 0px solid #ddd;
line-height: 1.42857;
padding: 8px;
vertical-align: top;
}
.btn-footer p button{width:100%; text-align:center; font-weight:600; border-radius:10px;}
.btn{ text-align:left;}
.dropdown-menu{ width:100%;}
.xy-radio{ border:1px solid #dfdfdf; border-radius:10px; background-color:#eeeeee;}/*
.xy-radio p{ padding-left:12px; margin-bottom: 0px; padding-top:6px; padding-bottom:6px; padding-right:12px;}*/
.form-group .bg-input{ background-color:#eeeeee;}
.xy-radio-p1{
border-bottom:1px solid #dfdfdf;
}
#woman-radio{
margin-right:10px;
}
#man-radio{
margin-right:10px;
}
#sub{
margin-right:10px;
}
#sub-button{ width:100%;}
.clearboth{ clear:both;}
.xue-div1{ padding:0px 15px 0 15px; height: 35px;}
.xue-div1 span{ position:relative; margin-left: 5px; top: -21px;}
.xue-div2{padding:0px 15px 0 15px; border-top:1px solid #dfdfdf; height: 35px;}
.xue-div2 span{ position:relative; margin-left: 5px; top: -21px;}
.sex-div1{ padding:0px 15px 0 15px; height: 35px;}
.sex-div1 span{ position:relative; margin-left: 5px; top: -29px;}
.sex-div2{padding:0px 15px 0 15px; border-top:1px solid #dfdfdf; height: 35px;}
.sex-div2 span{ position:relative; margin-left: 5px; top: -29px;}
.su-radio-all input{opacity:0; width:100%; border-bottom:1px solid #ffffff; visibility:hidden;}
.su-radio-all label{width:13px; height:13px; background:url(images/bt2.png); background-size:13px 13px; border-radius:100%; position:relative; top:-18px;}
.su-radio-all input[type="radio"]:checked + label{background:url(images/bt1.png) no-repeat; background-size:13px 13px;}
.xy-radio input{opacity:0; width:100%; border-bottom:1px solid #ffffff; visibility:hidden;}
.xy-radio label{width:13px; height:13px; background:url(images/bt2.png); background-size:13px 13px; border-radius:100%; position:relative; top:-10px;}
.xy-radio input[type="radio"]:checked + label{background:url(images/bt1.png) no-repeat; background-size:13px 13px;}
select{ display:none; outline:none;}
a{text-decoration:none;}
*{margin:0;padding:0;}
ul{ list-style:none;}
.select_box{
background-color:#eeeeee;
border-radius:10px;
line-height:2.5;
font-size:14px;
color:#999999;
width:100%;
margin:0px auto;
}
.select_showbox{
border:1px solid #dfdfdf;
border-radius:10px;
height:35px;
padding-left:10px;
background:url(images/bt3.png) no-repeat 156px 0;
background-size: 13px 10px;
background-position: 97.76% 13px;
}
.select_option{
border:1px solid #dfdfdf;
border-radius:10px;
border-top: none;
display:none;
}
.select_option ul{border-radius:10px;}
.select_option li{
padding-left:5px;
border-top:1px solid #dfdfdf;
}
.select_option li.selected{
background-color:#F3F3F3;
color:#999;
}
.select_option li.hover{
background:#7b6959;
color:#fff;
}
</style>
</head>
<body>
<div class="xy-cotent">
<div class="container xy-navigation">
<ul class="row">
<li class="col-xs-1"><img src="images/13.png"/></li>
<li class="col-xs-10 xy-navigation-txt">武汉市预约献血登记表</li>
</ul>
</div>
<div class="container xy-subtxt">
<div class="row">
<div class="col-xs-12">
预约献血可以对您提供更好的服务，免去您排队等待的时间。
如遇人数满员情况，我们会与您联系进行调整。
谢谢您对无偿献血事业的付出！
</div>
</div>
</div>
<form role="form" class="su-form-content" onSubmit="return myCheck()">
<div class="form-group">
<label for="name"><i>* </i><small>姓名：</small></label>
<input type="text" class="form-control bg-input defaule-radius" id="name" placeholder="请输入名称" />
</div>
<div class="form-group">
<label for="name"><i>* </i><small>性别：</small></label>
<div class="su-radio-all" onClick="sex()">
<div class="sex-div1">
<input type="radio" id="A" name="a" checked='checked'>
<label for="A"></label>
<span>男</span>
</div>
<div class="sex-div2">
<input type="radio" id="B" name="a">
<label for="B"></label>
<span>女</span>
</div>
</div>
</div>
<div class="form-group">
<label for="name"><i>* </i><small>手机号：</small></label>
<input type="text" class="form-control bg-input defaule-radius" id="tel" placeholder="请输入手机号" />
</div>
<div class="form-group su-form-around">
<label for="name"><i>* </i><small>献血区域：</small></label>
<select name="choose" id="choose">
<option value="选择风格" selected="selected">硚口献血点（全血）</option>
<option value="复古风">A型血</option>
<option value="摇滚风">B型血</option>
<option value="怀旧风">C型血</option>
</select>
</div>
<div class="form-group" class="su-form-around">
<label for="name"><i>* </i><small>预约日期：</small></label>
<select name="choose" id="choose">
<option value="选择风格" selected="selected">2015年3月29日（周五）</option>
<option value="复古风">2015年3月30日（周六）下午</option>
<option value="摇滚风">2015年3月31日（周日）上午</option>
<option value="怀旧风">2015年4月01日（周一）下午（</option>
</select>
</div>
<div class="form-group">
<label for="sub-xue" ><i>* </i><small>献血类型：</small></label>
<div class="xy-radio">
<div class="xue-div1">
<input type="radio" id="C" name="c" checked='checked'>
<label for="C"></label>
<span>全血</span>
</div>
<div class="xue-div2">
<input type="radio" id="D" name="c">
<label for="D"></label>
<span>单采成分血</span>
</div>
</div>
</div>
<div class="form-group">
<label for="name"><small>备注：</small></label>
<textarea id="txtArea"class="form-control bg-input defaule-radius" rows="5"></textarea>
</div>
</form>
<div class="container btn-footer">
<div class="row">
<p class="col-xs-12"><button type="button" class="btn btn-success">确认预约</button></p>
</div>
</div>
<div class="clearboth"></div>
</div>
</body>
<script type="text/javascript">
function sex(){
var rs=document.getElementsByName('a');
for(var i=0; i<rs.length;i++){
if(rs[i].check){
alert(rs[i].value==0?"女":"男");
break;
}
}
}
</script>
<script src="../bootstrap下拉框/js/select/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
(function($){
//获取select
var selects=$('select');
for(var i=0; i<selects.length;i++){
createSelect(selects[i],i);
}
function createSelect(select_container, index){
var tag_select=$('<div></div>');
tag_select.attr('class','select_box');
tag_select.insertBefore(select_container);
var select_showbox=$('<div></div>');
//容易出错appendTo
select_showbox.css('cursor','pointer').attr('class','select_showbox').appendTo(tag_select);
//容易出错
var ul_option=$('<ul></ul>')
ul_option.attr('class','select_option');
ul_option.appendTo(tag_select);
createOptions(index,ul_option);
tag_select.toggle(function(){
ul_option.show();
},function(){
ul_option.hide();
});
var li_option=ul_option.find('li');
li_option.on('click',function(){
$(this).addClass('selected').siblings().removeClass('selected');
var value=$(this).text();
select_showbox.text(value);
ul_option.hide();
});
li_option.hover(function(){
$(this).addClass('hover').siblings().removeClass('hover');
},function(){
li_option.removeClass('hover');
});
}
function createOptions(index,ul_list){
//获取被选中的元素并将其值赋值到显示框中
var options=selects.eq(index).find('option'),
selected_option=options.filter(':selected'),
selected_index=selected_option.index(),
showbox=ul_list.prev();
showbox.text(selected_option.text());
//为每个option建立个li并赋值
for(var n=0;n<options.length;n++){
var tag_option=$('<li></li>'),//li相当于option
txt_option=options.eq(n).text();
tag_option.text(txt_option).css('cursor','pointer').appendTo(ul_list);
//为被选中的元素添加class为selected
if(n==selected_index){
tag_option.attr('class','selected');
}
}
}
})(jQuery)
</script>
</html>