下拉框三角换成图、重构select、下拉框样式、select样式

下拉框三角换成图、重构select、下拉框样式、select样式  

2010-04-10 16:44:26|  分类： 网页制作|举报|字号 订阅

网上一直找不到，结合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="javascript">
$(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>

就不一一解释了，很容易看懂。希望前台制作的朋友有点帮助！！！！