项目中要用到<select>下拉菜单,但是显示的文字不能居中……不能居中实在太丑了吧……查过<select>根本没有能让文字居中的属性。最后只能自己模拟一个,废话不说直接上代码。
这里的下拉菜单是用来选择月份的,一共有三个月,默认为当前月份。在菜单里,如果选择了的,就填到<span>里去,然后在菜单里隐藏这一项,显示其他两项。
<style>
.ui-select {
margin-top: 5%;
text-align: center;
}
.ui-select select {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 3em;
opacity: 0;
}
</style>
<!--外层是boostrap。下拉框菜单 -->
<div class="row-fluid">
<div class="span12">
<div class="ui-select">
<ul class="unstyled list-group">
<li class="list-group-item" style="background-color: #59ABED;color: #ffffff">
<span id="last00" style="background-color: #59ABED;color: #ffffff"></span>
<select id="select">
<option id="last0" value="last0"></option>
<option id="last1" value="last1"></option>
<option id="last2" value="last2"></option>
</select>
</li>
</ul>
</div>
</div>
</div>
//选择菜单的处理方法:点击谁<span>就是谁的值;点击谁谁就隐藏,其他显示
$("#select").change(function(){
var select=$("#select").val();
switch(select)
{
case "last0":
var last0= $("#last0").text();
$("#last00").text(last0+" "+"▼");
$("#last0").hide();
$("#last1").show();
$("#last2").show();
$("#body").empty();
attendance_check.getdatelast0_sign();
break;
case "last1":
var last1= $("#last1").text();
$("#last00").text(last1+" "+"▼");
$("#last1").hide();
$("#last0").show();
$("#last2").show();
$("#body").empty();
attendance_check.getdatelast1_sign();
break;
case "last2":
var last2= $("#last2").text();
$("#last00").text(last2+" "+"▼");
$("#last2").hide();
$("#last0").show();
$("#last1").show();
$("#body").empty();
attendance_check.getdatelast2_sign();
break;
}
})
最后的结果是: