select 美化，基于jquery

lzyy 楼主

起因是在实践中发现input的高度无法改变，也就是说再怎么调整，他的四周都会有空隙，当然只作用于IE，如果调整一下的话，FF下效果又不理想，没有什么好的解决方法，除非用图片模拟，为了追求完美，模拟就模拟吧。

本人习惯用jQuery，于是就找到了nicejform，专门用来美化表单的jquery插件。（我知道坛子上有相关的文章，我也参考过，但是美化不是我的强项，所以就想找现成的）

效果查看

看源码，可以发现没有另外添加样式，id之类的，所以如果不用这个插件了，页面也无需改动

众所周知，表单美化里面select是最不好模拟的，同样nicejforms也没有很好的模拟，那就自己动手改造吧。

3个半小时过去后......

终于被我征服了，彻底地模拟美化了select表单，可以说功能上一点都不差，修改了原版本的一些不足

       
• 点击页面空白处，弹出的options不能缩回
         
• 无法设置option的value值，一律都是"#"
         
• 由于都设置为了"#"，所以如果select放置到了页面的下方，选择后会回到页面顶部
  

现在这些问题全都解决了，可以正式派上用场了，oh，yeah！

效果查看

点击下载修改后的文件

-------------------------------------------------------------------------------------------------------------------------------------------------
10.1日添加

其实上面那个select美化有一个非常大的问题，不过好像没有人注意到，就是当页面载入完后，在页面的底部会出现这些选项，这次重新操刀，不再是对原插件的修修补补，自己重新写了code。

特点：

• 仅IE有效，FF下保持原状
• 不接受键盘响应，所以上下键无效，滚轴也无效
• 其他的应该都模仿的差不多了
  

由于前台编程也只是我的业余爱好，所以更加细致的模仿，只能靠大家了。

其实我自己也觉得写这么一堆未必有用，但是既然都写出来了，还是放上来吧，有用没用让大家来评价。

浏览地址：http://www.live-my-life-with-yuyi.com/lab/jquery/form_select/

代码：

1. if($.browser.msie)
   
2. $(document).ready(function(){
   
3.         //对每一个select进行美化
   
4.         $("select").each(function(){
   
5.                 select_name = $(this).attr("name");
   
6.                 //取得select的高度
   
7.                 width = $(this).width();
   
8.                 //取得input的宽度
   
9.                 input_width = width-17;
   
10.                 //取得绝对坐标
    
11.                 offset = $(this).offset();
    
12.                 //美化的代码
    
13.                 select_html = '<div style="width:'+width+'px;position:absolute;left:'+offset.left+'px;top:'+offset.top+'px"><input type="text" style="width:'+input_width+'px;" autocomlete="off" readonly="true" id="input_'+select_name+'" class="select_input"/><img id="img_'+select_name+'" name="'+select_name+'" class="select_img" src="s.gif" width="17" height="21"></div>';
    
14.                 //附加到页面上
    
15.                 $("body").append(select_html);
    
16.                 $(this).css({visibility:"hidden"});
    
17.                 //$(this).css("margin","200px");
    
18.                 //取得option的数量
    
19.                 option_num = $("option",$(this)).length;
    
20.                 //option的高度
    
21.                 option_height = option_num * 21 > 200 ? 200 : option_num*21;
    
22.                 //option的宽度
    
23.                 option_width = width;
    
24.                 //option的坐标
    
25.                 option_left = offset.left;
    
26.                 option_top = offset.top+21;
    
27.                 //下拉菜单的美化代码
    
28.                 option_html = "<div class='select_option_div' id=option_"+select_name+" style='height:"+option_height+"px;width:"+option_width+"px;position:absolute;top:"+option_top+"px;left:"+option_left+"px;overflow:auto'>";
    
29.                 $(this).find("option").each(function(){
    
30.                         option_html += "<div class='select_option'>"+$(this).text()+"</div>";
    
31.                 });
    
32.                 option_html += "</div>";
    
33.                 //附加到页面上
    
34.                 $("body").append(option_html);
    
35.                 //隐藏选项
    
36.                 $("#option_"+select_name).hide();
    
37.                 //设定img id 和 input id
    
38.                 img_id = "#img_"+select_name;
    
39.                 input_id = "#input_"+select_name;
    
40.                 //设定图片点击事件
    
41.                 $(img_id).click(function(){
    
42.                         //通过name取得目标id
    
43.                         dest_id = "#option_"+$(this).attr("name");
    
44.                         //取得选项的状态是打开还是关闭
    
45.                         state = $(dest_id).css("display");
    
46.                         //关闭所有的选项
    
47.                         $(".select_option_div").hide();
    
48.                         //开的关，关的开
    
49.                         if(state == "none"){
    
50.                                 $(dest_id).show();
    
51.                         }
    
52.                         else{
    
53.                                 $(dest_id).hide();
    
54.                         }
    
55.                 });
    
56.                 //input的点击事件
    
57.                 $(input_id).click(function(){
    
58.                         //取得目标id
    
59.                         dest_id = $(this).attr("id").substr(6);
    
60.                         dest_id = "#option_"+dest_id;
    
61.                         state = $(dest_id).css("display");
    
62.                         $(".select_option_div").hide();
    
63.                         if(state == "none"){
    
64.                                 $(dest_id).show();
    
65.                                 //alert("hello");
    
66.                         }
    
67.                         else{
    
68.                                 $(dest_id).hide();
    
69.                         }
    
70.                 });
    
71.                 //设置默认选中的项
    
72.                 obj = document.getElementById(select_name);
    
73.                 input_id = "#input_"+select_name;
    
74.                 $(input_id).val(obj.options[obj.selectedIndex].text);
    
75.         });
    
76.         //当点击选项后的操作
    
77.         $(".select_option").click(function(){
    
78.                 //取得select id
    
79.                 parent_id = $(this).parent().attr("id");
    
80.                 parent_id = parent_id.substr(7);
    
81.                 input_id = "#input_"+parent_id;
    
82.                 //在input处显示所选项
    
83.                 $(input_id).val($(this).text());
    
84.                 //操作select选项
    
85.                 obj = document.getElementById(parent_id);
    
86.                 obj.options[obj.selectedIndex].text=$(this).text();
    
87.                 option_id = "#option_"+parent_id;
    
88.                 //选中之后隐藏选项
    
89.                 $(option_id).hide();
    
90.         });
    
91.         //对option选项应用鼠标移入移出效果
    
92.         $(".select_option").hover(function(){$(this).addClass("select_highlight")},function(){$(this).removeClass("select_highlight")});
    
93. });
    
94. //点击页面函数
    
95. $(document).click(function(evt){
    
96.         var evt = evt || window.event; // event object
    
97.         var target = evt.target || window.event.srcElement; // event target
    
98.         var t_className = target.className; // event target id
    
99.         if(t_className == "select_img" || t_className == "select_input" || t_className == "select_option"){
    
100.                 return false;
     
101.         }
     
102.         else{
     
103.         $(".select_option_div").hide();
     
104.         };
     
105. });

复制代码

[ 本帖最后由 lzyy 于 2007-10-1 20:51 编辑 ]

myhx

效果不错,沙发~~~~~

warran

好的,很强大
为了你的三个小时!建议版主给分 ~~~

changyucun

不错不错，比以前那个要好很多，顶了

thinkbar

不错不错，谢谢啦哈！

xlez

这么麻烦，怎么不用flash

dolldom

的确比原来的好多了

赞一个

xkang

我没觉得什么特别呀

jiaxueq

简单的感觉了一下， SELECT弹出后，点出SELECT以外的地方能消失，这点不错。

建议再修改一下，SELECT中，鼠标放在option没文字的地方，也能将option选中。

（鼠标放在有文字的地方才能做选择，有点不适应）

aeoluszzf

给option样式 加上 height: 1% 就可以了

负羽

点击页面空白处，弹出的options不能缩回

我用的遨游，这个问题还是会出现啊

aeoluszzf

IE6下也有这个问题
增加
document.onclick=function{
//hide options
}

sdw65063251

LZ的代码浏览器报错

MarVell

SELECT的边框颜色怎么改变? 用CSS可以么?

btpig

这个挺好看的哦。。

cjiang

在Username里边输入中文加英文，如：中国aaabbb
Username控件有点变形（IE下，FF不知道）

badwish

select做的不好看。。。

帅青蛙

楼主修改一下帖子吧，说明一下是怎么操作的，在做的过程中需要注意什么等等。
把你的思路跟大家讲讲，然后给你加分。

weasle

是很好看,不过这样做是不是太费成本了,呵呵.不过看东西顶下.

lzyy 楼主

更新了一下

doggic

小建议：
select下拉框的宽度最好和select一样宽
不一样使用起来不方便

zsnhy

不错，以前也被这个美化问题难住过

304399008

很好啊
继续发扬！

yangsongmao

完却的看不懂

heluyao

火狐下没变化

cvpc

效果不错的～
但，点击非select区域后select为什么还在那里呢？

xbrr

直接用Ext不就可以了……

heihei1314

不错。。。。

xiahaiyong

好东西分享了 才算好东西

楼主辛苦啊

kxm1984

真漂亮，厉害，牛