虽然面试的时候是说自己想专注于java后台开发,但开发过程中肯定也会有种种其它问题需要去解决嘛。这不,项目经理说要在一个下拉框中放一个X的Y次方这类的数据。尝试发现原生的下拉框select中使用<sup>标签并不起作用。 虽然我对前端的东西并不是很熟,但是程序猿不能说不!即使要根据心情来改变主题这种需求也要想办法去解决! 所以呢自己就鼓捣出来了一个还算能用的自定义下拉框。仅供参考。
一、最终效果
即可以在下拉选项中使用样式,也可以将自己需要的内容放至下拉选项中。
(刚使用的gif图制作工具,分享一波:gif图制作小工具)
二、实现步骤
2.1 设置自定义下拉框的样式
<style type="text/css">
.mySel{position:relative; background: #fff;}
.mySel cite{ width: 120px; padding-left:4px; display:block; color:#575757; cursor:pointer;font-style:normal; border:1px solid #E4E4E4;border-left: 1px solid #ccc;border-top: 1px solid #ccc;}
.mySel ul{width:124px; height:130px; display:none; /*overflow-y:scroll;*/ border:1px solid #E4E4E4; background-color:#ffffff; position:absolute;margin-top:-1px;margin:0px;padding:0px;list-style:none;}
.mySel ul li{padding-left:4px;line-height:25px;}
.mySel ul li a{display:block; color:#333333; text-decoration:none;}
.mySel ul li a:hover{background-color:#1277D3;color:white;}
</style>
2.2 定义我们的下拉框内容
自定义内容放在 li 标签下的 a 标签中
<span id="mySelect" class="mySel">
<cite>请选择</cite>
<ul>
<li><a href="javascript:;" ><span>请选择</span></a></li>
<li><a href="javascript:;" ><span style="color: red;">自定义内容1</span></a></li>
<li><a href="javascript:;" ><span>自定义内容2</span></a></li>
<li><a href="javascript:;" ><span>自定义内容3</span></a></li>
<li><a href="javascript:;" ><span>我<sup>你</sup></span></a></li>
</ul>
</span>
2.3 定义js实现点击出现下拉和获取选项
<script type="text/javascript">
/*点击弹出和取消下拉内容*/
$("#mySelect cite").click(function(event) {
event.stopPropagation();
$(this).siblings('#mySelect ul').toggle();
var tag = $(this).siblings('#mySelect ul');
var flag = true;
$(document).bind("click",function(e){//点击空白处,设置的弹框消失
var target = $(e.target);
if(target.closest(tag).length == 0 && flag == true){
$(tag).hide();
flag = false;
}
});
});
/*选择下拉内容并收起*/
$("#mySelect ul li a").click(function(){
var b_1 = $(this).html();
$("#mySelect cite").html(b_1);
$("#mySelect ul").css("display","none");
});
</script>
总结:上面三步之后即可使用自己定义的下拉框。需要注意的是需要用到 jquery 的。并且该自定义下拉框必须用到一个id.通过该id才能定位到我们的下拉框的位置。也是通过该id我们才能给它赋值和取值。 若需要用到多个自定义下拉框,只需重复步骤2.2和2.3并修改其id即可。
另外简单说一下一些点:
①需要修改下拉框的长度:修改.mySel cite{} 中的width属性 并同时修改 .mySel ul{}中的width属性
②需要修改下拉框的高度 : 修改.mySel cite{}中的heigth属性. (overflow-y:scroll属性可以实现固定高度的滑动下拉效果)
③需要修改下拉选项的间距 : 修改.mySel ul li{}中的line-height属性.
④需要获取下拉选项的值:通过$("#mySelect cite").html();
⑤需要赋值给下拉选项:通过var val = '你的值'; $("#mySelect cite").html(val );
最后附上一段完整的验证代码:(可以直接复制整篇到文件后用浏览器打开)
<html>
<head>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
.mySel{position:relative; background: #fff;}
.mySel cite{ width: 120px; padding-left:4px; display:block; color:#575757; cursor:pointer;font-style:normal; border:1px solid #E4E4E4;border-left: 1px solid #ccc;border-top: 1px solid #ccc;}
.mySel ul{width:124px; height:130px; display:none; /*overflow-y:scroll;*/ border:1px solid #E4E4E4; background-color:#ffffff; position:absolute;margin-top:-1px;margin:0px;padding:0px;list-style:none;}
.mySel ul li{padding-left:4px;line-height:25px;}
.mySel ul li a{display:block; color:#333333; text-decoration:none;}
.mySel ul li a:hover{background-color:#1277D3;color:white;}
</style>
</head>
<body>
<table>
<tr>
<td>自定义下拉框:</td>
<td>
<span id="mySelect" class="mySel">
<cite>请选择</cite>
<ul>
<li><a href="javascript:;" ><span>请选择</span></a></li>
<li><a href="javascript:;" ><span style="color: red;">自定义内容1</span></a></li>
<li><a href="javascript:;" ><span>自定义内容2</span></a></li>
<li><a href="javascript:;" ><span>自定义内容3</span></a></li>
<li><a href="javascript:;" ><span>我<sup>你</sup></span></a></li>
</ul>
</span>
</td>
</tr>
</table>
<hr>
<button id="getValBtn">取值</button>
<button id="setValBtn">赋值</button>
<script type="text/javascript">
/*点击弹出和取消下拉内容*/
$("#mySelect cite").click(function(event) {
event.stopPropagation();
$(this).siblings('#mySelect ul').toggle();
var tag = $(this).siblings('#mySelect ul');
var flag = true;
$(document).bind("click",function(e){//点击空白处,设置的弹框消失
var target = $(e.target);
if(target.closest(tag).length == 0 && flag == true){
$(tag).hide();
flag = false;
}
});
});
/*选择下拉内容并收起*/
$("#mySelect ul li a").click(function(){
var b_1 = $(this).html();
$("#mySelect cite").html(b_1);
$("#mySelect ul").css("display","none");
});
/*取值*/
$('#getValBtn').click(function(){
var content = $("#mySelect cite").html();
alert('当前值是:' + content);
});
/*赋值*/
$('#setValBtn').click(function(){
var content = '自定义内容2';
$("#mySelect cite").html(content)
alert('赋值为:' + content);
});
</script>
</body>
</html>