用jQuery模拟select下拉框的简单示例代码

很多时候，美工会觉得默认的select下拉框很难看（特别是右侧的下拉箭头按钮），他们通常喜欢用一个自定义的图标来代替这个按钮。这样就只能用 js + div 来模拟了，倒腾了一番，用jQuery模拟了下，当然网上这种文章也不少，只是懒得去看找
复制代码 代码如下:



   
   
   
        *{font-size:12px;line-height:18px;list-style:none;padding:0;margin:0;text-decoration:none;color:#000;border:0}
        .page{text-align:center;margin:50px;}
        input{border-bottom:solid 1px #ccc;height:18px}             
        .expand{display:none;position:absolute;width:200px;height:100px;overflow-y:auto;border:solid 1px #ccc};
  .expand li{margin:1px 0;background:#fff}
        .expand a{text-decoration:none;display:block;padding:0 5px;background:#efefef;margin:1px 0}
        .expand a:hover{background:#ff9}
   
   
   


   
                    href="#" onclick="showExpand('txt_city','city_select1','expand')">▼
       
           

               
• SH 上海

               
• BJ 北京

               
• HZ 杭州

               
• WH 武汉

               
• NJ 南京

               
• WX 无锡

           

               
• CN 中文

               
• EN 英语

               
• JP 日本

               
• RA 俄语

               
• FA 法语

               
• 00 其它

           

  

  

  
  

  
   



无图无真相，真相在此：

不足之处：
1、按键盘上下键时，没有高亮的自动移动
2、键入文字自动过滤结果时，感觉相对原生的select有些不自然