下拉列表框

<!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>*&nbsp;</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>*&nbsp;</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>*&nbsp;</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>*&nbsp;</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>*&nbsp;</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>*&nbsp;</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>

你可能感兴趣的:(下拉列表)