网上一直找不到,结合jquery自己写了一个,还不错,很有成就感。呵
首行需导入jquery.js包
页面代码如下:
<div style=" border:1px solid #CCCCCC; width:90px; height:19px; line-height:20px;">
<input type="text" class="select_input" style="width:70px; border:0px;" value="请选择分类" readonly="readonly"><img src="select_option.jpg" class="select_img" height="18" style=" vertical-align:middle;cursor:pointer; "/></input>
</div>
<ul>
<li class="selected">请选择分类</li>
<li title="水果类">水果类</li>
<li title="蔬菜类">蔬菜类</li>
<li title="瓜果类">瓜果类</li>
<li title="水果类2">水果类2</li>
<li title="蔬菜类2">蔬菜类2</li>
<li title="瓜果类2瓜果类大">瓜果类2瓜果类大</li>
<li title="瓜果类3">瓜果类3</li>
<li title="水果类3">水果类3</li>
<li title="蔬菜类3">蔬菜类3</li>
<li title="瓜果类3">瓜果类3</li>
</ul>
js代码如下:
<script language="javas
$(document).ready(function(){
$("ul").hide();
$(".select_img").bind("click",function()
{
$("ul").fadeIn(800);
});
$("ul li").hover(function(){
$(this).addClass("selected").siblings().removeClass("selected");
}).bind("mouseup",function(){
$("ul").fadeOut(1);
var txt = $(this).html();
var input = document.getElementsByTagName("input");
input[0].value = txt;
});
$(this).bind("mouseup",function(){
//如果ul还显示着,将其隐藏
if($("ul").css("display") == "block")
{
$("ul").fadeOut(0);
}
});
});
</script>
当然别忘了样式
<style>
ul{ list-style:none; display:block; width:90px; margin:0px; padding:0px; border:1px solid #ccc; border-top:0px; height:92px; overflow:scroll;overflow-x:hidden;}
ul li{ font-size:12px; height:18px; line-height:18px; cursor:pointer;word-break:keep-all; overflow:hidden;}
ul .selected{ background-color:#BC0902; color:#FFF;}
</style>
就不一一解释了,很容易看懂。希望前台制作的朋友有点帮助!!!!