下拉框实现

来源：互联网发布：詹姆斯科比总决赛数据编辑：程序博客网时间：2024/06/07 11:00

在工作中原生的下拉框完成不了设计图的要求，select中option不能修改高度，因此需要自己模拟一个下拉框，用ul,li来实现一个下拉框的功能代码如下:

<!DOCTYPE html>

<html>

<head>

*{padding:0;margin:0}

body{font-family:"微软雅黑";font-size:16px}

.box{width:600px;margin:200px auto;position:relative;}

.box input{font-weight:normal;font-size:16px;height:38px;border:1px solid #ccc;cursor:pointer;width:260px;box-shadow:0 0 3px #aaa;text-indent:15px;position:relative;font-family:"微软雅黑;"}

ul{border:1px solid #ccc;border-top:0;box-shadow:0 0 3px #aaa;lin-height:38px;width:260px;position:absolute;top:38px;background:#fff;list-style:none;text-indent:15px;display:none;}

ul li{cursor:pointer;}

li:hover{background:#aaa;}

.arrow{width:0px;height:0px;boder-width:10px;border-style:solid dashed dashed dashed;border-left-corlor:transparent;border-right-color:transparent;border-botttom-color:transparent;}

.arrowTop{border-bottom-color:black;border-top-color:transparent;top:2px}

</style>

<head>

<body>

</ul>

</div>

=============================test.js中代码如下==================

$(function(){

//点击弹出下拉框：

$(".inputValue").unbind("click").click(function(){

if($(".box").find("ul").css("display")=="none"){

$(".box").find("ul").show();

//增加箭头样式

$(".arrow").addClass("arrowTop");

}else{

$(".box").find("ul").hide();

//去掉向上的箭头改成向下的

$(".arrow").removeClass("arrowTop");

}

})

$(".box").bind({

//"mouseenter":function(){

//$(this).find("ul").show();

//},

//"mouseleave":function(){

//$(this).find("ul").hide();

//},

"click":function(event){

if(event.target.tagName=="LI"){

$(this).find("input").val($(event.target).text());

$(this).find("ul");

}

//$(this).find("ul");

}

})

$("#selectLanByLoginUl li").each(function(){

if($(this).text()=="spanish"){

$(this).find("input").val($(this).text());

}

})

阅读全文

0 0