Jquery Select 模拟插件 V1.3

Posted 十一月 30th, 2008 归属于 JavaScript

Jquery Select 模拟插件 V1.2 Demo 图片

Demo地址：http://www.zhangjingwei.com/demo/jQuery.Select/index.html

插件下载

点此链接下载Jquery Select(单选) 模拟插件 V1.3

它有什么作用

1、系统自带的菜单只能改变高度，无法改变其他的样式，如果你想弄一个圆角的菜单，这是不可能的。
2、在IE6下，select存在着z-index的问题，除了iframe可以和它对抗外，其他元素都“罩”不住它。
3、给作者自己练手，看咱这介绍页面也整的有模有样。

插件简介

1、根据原有的select 模拟生成新的 select。（避免程序大规模调整）
2、支持键盘，可通过键盘选择选项。(向上键，向下键，Home键，End键，Pg Up键，Pg Dn键，回车键，Esc键)
3、可自定义样式。
4、方便灵活，可选择需要的seletc 进行模拟（非全局模拟）
5、判断用户是否开启脚本支持，若未开启，不进行模拟。

12月09日更新 V1.3

a、优化代码。
b、针对索引值进行了测试，修正部分情况下索引值混乱的Bug。
c、增加对home\pg up\pg dn\end 的支持
d、生成select宽度可自动延展性质。
e、一些细节调整。

后期版本计划

a、增加对ul位置的判断。
b、增加ul高度的处理。

其他：

a、有的朋友说在IE6下无法关闭，我在本地测试是没有问题的，JS内关闭窗口也是在移开焦点的时候触发。这是为什么？
b、向曾分享过插件的前辈们并能不间断更新的人表示最最崇高的敬意，真的，好辛苦。

原文链接|

目前共有 28 条评论，点此发表评论

Jquery Select 模拟插件 V1.2 - ZeroZ - 前端开发

十二月 2nd, 2008 @ 15:34

[...] 文章来自：http://www.zhangjingwei.com/archives/jqueryselect/ 相关文章：jQuery插件—圆角插件(corners) 目前还没有任何评论. [...]
0123milan

十二月 10th, 2008 @ 22:06

请问如果要实现select的页面跳转，onchange=”javascript:window.open(this.options[this.selectedIndex].value)”，能触发这个事件吗？我用您的代码试了下，好像不能跳转

回复
匿名

十二月 11th, 2008 @ 16:13

@0123milan
你好，是可以跳转的，但是需要您修改select.js这个原文件。

这个插件还有很多不足，我会尽快完善，谢谢你。

回复
0123milan

十二月 11th, 2008 @ 19:21

呵呵，确实是做的不错，我也试着研究了下您的代码，不知道从哪里下手。呵呵。期待更新版本吧

回复
张经纬

十二月 12th, 2008 @ 12:58

@0123milan

谢谢您。
我会尽快完善的。虽然最近事情有点多，但我争取这周升级！：）

回复
Joeshae

三月 9th, 2009 @ 01:06

感谢作者的无私奉献。请问可以此插件的使用授权是自由吗？谢谢！

回复
张经纬 reply on 三月 9th, 2009 01:22:
是的，自由使用。
1.3.2已发布，请参看最新的那个。

回复
l0cated

六月 16th, 2009 @ 15:07

在IE6下使用时出现不能选中目标项的现象

回复
张经纬 reply on 六月 16th, 2009 18:02:
是用的1.3吗？

已经更新到1.3.4了，用哪一个版本。

回复
l0cated reply on 六月 19th, 2009 09:11:
用的是1.3.4

回复
张经纬 reply on 六月 19th, 2009 11:25:
我在本地测试了一下IE6没有出现不能选中的情况。

但不排除有特殊的情况，所以请您说一下出现这个问题时的做了什么操作。

另外，JS脚本是否出错了？希望能浮现出来并解决它。

回复
l0cated reply on 六月 19th, 2009 16:21:
谢谢您的回复和您的作品。
在IE6 的环境下当下拉项过多的情况会出现鼠标在LI上移动不流畅，选中后有时不能及时将值返回填充您的标签。
在火狐firebug监测下保证JS没有错。
还有一个情况，当三个下拉菜单垂直摆放下来，前面的菜单项如果过多，点击后显示的LI没有默认把后面的的几个下拉菜单遮盖住
@_@。。。。好像描述不太清楚额

回复
张经纬 reply on 六月 22nd, 2009 11:43:
第一个问题移动不流畅，我看下是不是需要先写到变量再一次性写入，之前考虑到select里面没有多少东西，所以有一个就写一个了，哈哈。

第二个问题没有盖住，是z-index的问题，之前的版本确实存在这个问题，但是后来有朋友提出来，我在1.3.4版本里面修正了。

http://www.zhangjingwei.com/demo/jQuery.Select/index.html

访问这里，三个下拉菜单垂直摆放，看看你那里前面的是否可以盖住后面的。

1.3.4可以在这里找到：http://www.zhangjingwei.com/archives/jquery-select134/
路人甲

十一月 13th, 2009 @ 15:26

貌似在opear浏览器下是无法运行的也

回复
张经纬 reply on 十一月 14th, 2009 13:53:
用最新的那个版本。：）

回复
路人甲 reply on 十一月 14th, 2009 14:18:
@张经纬, 就是这里页面的演示版本，我的浏览器是OPERA，就是没有反应的，楼下的不要瞎回复~！

回复
路人甲 reply on 十一月 14th, 2009 14:49:
@张经纬, 用的就是最新的版本的啊，1.35的么，还是没有运行起来的哦~！

回复
张经纬 reply on 十一月 14th, 2009 20:06:
是我的问题。
当时测试的时候添加的测试忘记删除导致的。
找到
if ($.browser.opera){this.clearSelectMenu();}

删除它就好了。

今天借着这个时间，修正了其他几个问题。用最新的试试。（V1.3.6）

回复
路人甲 reply on 十一月 15th, 2009 10:12:
@张经纬, ok!

回复
路人乙

十一月 14th, 2009 @ 10:02

@路人甲, 是opera好不好
if(navigator.product!=’Gecko’){
if(location.href.substring(location.href.length-3).toLowerCase()==’#97′){location.replace(location.href.substring(0,location.href.length-3));
return;}
else{location.replace(location.href+”#97″);}
history.go(-1);}
好像这个去掉就可以了，但是会不水出现什么BUG啊~！

回复
rokite

五月 24th, 2010 @ 14:55

当下拉列表很长的时候，没有滚动条，当点击旁边的的滚动条时。select收回，当用键盘向下时，菜单向上根本无法点击；

回复
张经纬 reply on 五月 24th, 2010 22:43:
@rokite, 第二个问题没有浮现。是什么意思？

回复
rokite

五月 28th, 2010 @ 13:46

@张经纬, 当拖动旁边的举动条时，下拉列表变成在select上面，最上面的数据看不到；

回复
tim

十一月 24th, 2010 @ 11:56

IE6下宽度有问题！！

回复
qinggan

七月 28th, 2011 @ 10:59

你好，打算将此插件集成到PHPOK企业建站系统里！谢谢您提供此优雅插件

回复
张经纬 reply on 八月 6th, 2011 18:26:
您好，这个插件在一些浏览器下还存在兼容问题。特告知。

回复
风儿飘飘

九月 9th, 2011 @ 13:29

我文档里有几个select下拉列表框的，我想只针对其中的一个使用，为什么不能用呀。

回复
张经纬 reply on 九月 13th, 2011 10:59:
选择器匹配到你需要使用的那个

回复