张经纬的博客 -

jQuery Select(单选) 模拟插件 V1.3.6

a、增加了onchange事件。(谢谢fjgysai)

b、可以支持方法连缀了。

c、修正opera下的笔误。

d、可支持jQuery的选择器了

下载地址:http://www.zhangjingwei.com/demo/jQuery.Select/index.html

您可以自由的使用这个插件在任何项目上。(商业、非商业)
希望您可以补充完善这个插件。

原文链接|

目前 共有 37 条评论 ,点此发表评论

  1. 何亻可言吾語

    十二月 16th, 2009 @ 09:58

    首先非常感谢张老师的无私奉献.(您与我前老板差一ng就同名了.)

    再说说我遇到的问题.
    原来1.35也不错了,就是每一个select都要去选择才能起作用。
    现在1.36完善了许多,但今天在.net中使用时发现了点小问题,由于.net会自动给DropDownList的name添加长窜字符而且字符中有$,导致(name还没输出就结束了)。
    考虑到“selectId”几乎没有重复的可能就干脆不加入原name了,于是把JS第5行
    var selectId = (this.name||this.id)+’__jQSelect’+i||’__jQSelect’+i;
    改成
    var selectId = (this.id)+’__jQSelect’+i||’__jQSelect’+i;
    终于顺利输出,目前尚未发现有什么不妥之处。

    再次感谢。

    回复

    张经纬 reply on 十二月 17th, 2009 10:24:

    非常感谢,因为没有接触过.net,所以不知道会倒在这里。 :)

    回复

  2. 何亻可言吾語

    十二月 17th, 2009 @ 11:03

    我还以为留言审核不通过呢.
    昨天又加了一段disabled状态的.呵呵
    $.fn.sxSet=function(){
    return this.each(function(i,obj){
    var fsfgID = (this.id)+’xs’+i;
    $(this).before(“”).prependTo($(“#”+fsfgID));
    });
    };
    选择:
    $(document).ready(function(){
    $(“select:disabled”).sxSet();
    $(“select”).not(“select:disabled”).sSelect();
    });
    CSS:
    .set_disabledbox {width:80px; height:20px; display:inline-block; vertical-align:middle; overflow:hidden; background:#fff url(../images/select_bg.png) no-repeat right center; border:solid 1px #7ea0af;}
    .set_disabledbox select {width:125px; height:22px; margin:-2px 0 0 -1px; background:none transparent; border:0; filter:alpha(opacity=50); opacity:0.5; color:#125;}

    回复

    张经纬 reply on 十二月 17th, 2009 13:12:

    @何亻可言吾語,
    感谢,disable掉的组件就不允许执行相关的方法,只模拟出来一个样式。
    这个功能会增加到下一个版本里面,再次感谢完善这个小小的插件。:)

    回复

  3. kiyeer

    十二月 30th, 2009 @ 11:00

    1.36在IE6下出现脚本错误,在IE6,IE7,IE8下出现样式问题,在firefox,opera正常, 1.35在IE6下没有脚本错误。但在所有IE下同样有样式问题。

    回复

    张经纬 reply on 十二月 31st, 2009 10:45:

    1.36确实出现了脚本错误,元旦看下。

    样式问题,我这里没有浮现,我是IE8。

    谢谢你,很可能弄错了版本!尴尬~

    回复

    张经纬 reply on 十二月 31st, 2009 11:33:

    脚本错误问题请看源码176行

    selectZindex = selectZindex||’auto’;
    修改为
    selectZindex = selectZindex||”;

    样式问题,可先在selectStyle.css内修改,目前我修改了一下,dropselectbox,dropdown两个样式加一个左漂浮,不知道会不会引起其他的问题,这个地方没有做更多的兼容性测试。

    回复

  4. kiyeer

    十二月 31st, 2009 @ 15:02

    脚本和样式问题都解决了,但是在IE下,如果点击了下拉框,再点当前文档的任何区域,下拉框不会收起来等于说必须再单击一下下拉框才消失。在firefox,opera,chrom,safari正常,在safari下,下拉框的宽度不够,文字与三角图片有一点重叠。
    还有一点建议,作者可以考虑一下,那就是如果下拉框太长,是否可以像原形那样自动出现滚动条。还有就是如果下拉框的位置问题,比如说在页面底部,下拉框它自动会在上方。

    回复

    张经纬 reply on 一月 1st, 2010 18:01:

    safari下是有问题,jQ取的宽度有问题。

    ie下,你说的那个问题,我用ietester和ie8测试没有存在,你再试试?

    下拉框那个建议挺不错的,但就怕消耗资源太大,其实可以在样式里面控制,控制max-height,如果超过overflow-y:auto;

    回复

    wpg reply on 七月 16th, 2010 14:56:

    @张经纬, 博主,我也有这样的问题,希望新版本中能有滚动条的控制,在IE下加了左浮动后确实不能自动收起下拉框。

    回复

    张经纬 reply on 七月 19th, 2010 11:40:

    新版本会加上滚动条控制

    回复

  5. kiyeer

    一月 5th, 2010 @ 10:03

    max-height这个我用过,不行,因为出现滚动条时,如果下拉滚动条,下拉框会消失,因为产生了单击动作。

    回复

  6. 行者

    三月 6th, 2010 @ 16:10

    ie6下面,联动菜单示例部分出现换行了,宽度有问题,背景超出了。

    回复

  7. googlr

    三月 8th, 2010 @ 18:03

    留一个脚印 祝福

    回复

  8. 行者

    三月 18th, 2010 @ 08:43

    好啊,发现一个问题。
    在ie7下面,点击下拉列表的时候会报错。

    line:13
    char:12949
    error:类型不匹配
    code:0

    回复

  9. 卧龙山

    五月 16th, 2010 @ 21:11

    1、发现问题同楼上,在IE6、7下点击报错
    2、在IE6、7下样式有问题,可惜你这不能贴图,不过你用IETEST应该可以看到。

    3、最近也找了其他一个select模拟控件,不过感觉速度较慢,如果页面有多个SELECT控件需要美化页面加载后有明显的延迟(尤其是IE6,真想不支持它,可惜还是有很多客户用),不知道是否有办法提高模拟生成速度。

    回复

    张经纬 reply on 五月 16th, 2010 22:11:

    您好,找时间我修复一下这个错误,还有样式。

    一个页面中如果有过多的select可能模拟的速度也不会很快,如果只有几个而速度很慢的话,可以考虑将拼合等过程放到内存中去做。

    后头我处理下,最近这半年工作太忙了,而且这个东西也仅仅是个人娱乐,多多包涵,对不起。

    回复

  10. 行者

    七月 12th, 2010 @ 16:13

    再次用到,期待新版本。
    呵呵~

    回复

    张经纬 reply on 七月 13th, 2010 18:18:

    啊,还有人用呢,我脸上火辣辣的,因为好久没管了~

    内疚~好,这个月更新~

    回复

  11. 卧龙山

    七月 17th, 2010 @ 16:57

    因为用的另外一个控件在IE6下出现一个莫名其妙的问题:当页面嵌入IFRAME中时,在控件模拟完成后出现整个页面闪烁的问题,今天又回来看看张老师的作品。可是您太忙了,上次说的问题也还在。

    呵呵,幸苦了,支持继续完善。

    回复

    张经纬 reply on 七月 19th, 2010 11:39:

    这个情况我还没有测试。

    不过猜测是因为过多的dom节点操作有关。

    下一版会优化这一方面,新版已经在开发了,到时候再试试。

    回复

  12. lai

    七月 19th, 2010 @ 18:41

    1.3.6版本在IE6下一直都无法正常使用,等你的新版本了

    回复

  13. 困惑

    九月 9th, 2010 @ 00:31

    zhang sir 1.3.6的在ie6下游脚本错误哟 希望看哈是哪个问题了

    回复

  14. 胡搅蛮缠

    十二月 14th, 2010 @ 14:21

    好样的,很好用。
    在IE6\7下CSS有点点问题,不过看你的回复已经解决
    在 .dropdown 和 .dropselectbox下分别加个 float: left;即可,不过是否会引起其他问题,期待你的下一个版本^v^

    JS部分在IE6/7下有点问题
    clearSelectMenu:function(selectId,selectZindex){
    if(selectId != undefined){
    selectZindex = selectZindex||’auto’; //如果selectZindex = ‘auto’,IE6/7下会报错
    //增加了一句:
    if(selectZindex==’auto’){selectZindex=0;} //在IE下没问题了,不过其他浏览器没测试过,期待下一个官方版本^v^
    $(‘#’+selectId+’ ul’).empty().hide();
    $(‘#’+selectId+’ h4′).removeClass(“over”).removeClass(“current”);
    $(‘#’+selectId).css({‘z-index’:selectZindex});
    }
    },

    回复

    张经纬 reply on 十二月 25th, 2010 19:16:

    很久没弄了,你可以将你修正后的发上来啊。:)

    回复

  15. 太阳要落山咧

    六月 23rd, 2011 @ 09:47

    楼主,你在360下看过没,样式兼职不堪入目

    回复

    张经纬 reply on 六月 30th, 2011 21:24:

    嗯,做的时候还没有用过360浏览器,回头看看.:)

    回复

  16. 夜骐

    六月 28th, 2011 @ 15:27

    您好,张老师,我在用这个插件的遇到一个问题,就是如果父元素是隐藏的,然后经过切换后,显示出来时,该插件就会出现不能自适应宽度,求解决

    回复

    张经纬 reply on 六月 30th, 2011 21:25:

    有页面可以看看么?

    回复

  17. 嗯恩

    八月 5th, 2011 @ 15:57

    还是别搞原生了,模拟吧,有道的都从美化原生改成ul模拟了,原生太烂了

    回复

    张经纬 reply on 八月 6th, 2011 18:27:

    是模拟的。

    回复

  18. 风儿飘飘

    九月 9th, 2011 @ 13:55

    为什么每个都要模拟呀

    回复

  19. 风儿飘飘

    九月 9th, 2011 @ 13:56

    我想要有选择的模拟,怎么用呀,我不会用呀。

    回复

    张经纬 reply on 九月 13th, 2011 10:59:

    选择器匹配到你需要使用的那个

    回复

  20. 太阳要落山咧

    九月 20th, 2011 @ 13:12

    ie6 bug 修复没?

    回复

  21. afeiship

    十月 20th, 2011 @ 16:38

    Bug太多…

    回复

    张经纬 reply on 十月 21st, 2011 16:55:

    http://www.zhangjingwei.com/archives/jquery-select/ 用这个吧

    回复