jQuery自定义select下拉框

所属分类:输入-选择框

 31165  310  查看评论 (24)
分享到微信朋友圈
X
jQuery自定义select下拉框 ie兼容8

更新时间:2018/6/25 上午9:43:30

更新说明:添加了监听点击小箭头class的函数,点击右边的小箭头同样可以下拉显示或者隐藏;


更新时间:2018/6/19 下午8:20:47

更新说明:增加兼容火狐的事件event捕获,修复在火狐浏览器下面的下拉事件报错bug(未捕捉)


代码中有详细注释,方便大家使用和修改。

相关插件-选择框

不包邮省市选择(不含县)

jQuery选择省市地区,支持多选,单独筛选
  选择框
 27136  341

城市选择器,仿猎聘,支持多选,单选

城市选择器,仿猎聘,支持多选,单选
  选择框
 43274  421

移动端城市选择

手机移动端城市选择
  选择框
 56841  495

jQuery下拉菜单插件

jQuery下拉菜单插件UCSelect.js,包含多选,单选,分组选择,内容搜索,选择框大部分所需要的功能。
  选择框
 29247  311

讨论这个项目(24)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    白宇楼 0
    2024/2/29 9:39:16
    为啥下拉框是透明的!! 回复
    美国超人有裤衩? 0
    2019/10/25 17:05:21
    为什么value追加不了值? 回复
    Climber 0
    2018/12/20 16:00:41
    我用jq设置input框的默认值没得效果。然后再请问一下这个类actived_li的作用是什么啊?在代码中没有看到它的作用 回复
    Climber 0
    2018/12/20 15:46:07
    请问怎么默认显示一个东西呢? 回复
    一只喵喵?的奋斗史 0
    2018/11/13 17:37:13
    您好 火狐打开 无法点击 报错 ReferenceError: event is not defined;
        失控1
        2018/12/19 9:14:45

        只要在function里面添加一个event就解决了    楼主厉害!!

        $(".selectBox .imitationSelect").on("click", function(event) {
            $(this).parent().next().toggle(); //ul弹窗展开
            $(this).next().toggleClass("fa-caret-up") //点击input选择适合,小图标动态切换
            if (event.stopPropagation) {
                // 针对 Mozilla 和 Opera   
                event.stopPropagation();
            } else if (window.event) {
                // 针对 IE   
                window.event.cancelBubble = true;
            }
            /*阻止事件传播,事件从点击的元素出发,向外(window)传播,
             如果不写个阻止事件,会导致下面的document点击函数一起执行,导致显示失败*/
        
        });
    回复
    黄河爱浪 0
    2018/6/21 11:34:26
    右边三角的形状点击无法展开列表。所以不能用<i>,改用<label>指向<input>就能解决这个问题。虽然小事,但有些客户就是习惯了点那里!
        saber0
        2018/6/22 15:55:01
        你说的是,我会修复这个地方的,谢谢你的提示
        saber0
        2018/6/25 9:51:47
        刚刚提交,已添加i.fa;右边小箭头监听函数,请等版本更新下载;目前版本正在审核中
        saber0
        2018/6/26 8:45:16
        已审核通过
    回复
    saber 0
    2018/6/19 20:25:54
    刚刚提交了在火狐浏览器下面的事件捕捉event,能够兼容火狐,谢谢大家的提示,代码bug已修复,等明天下载
        saber0
        2018/6/20 8:51:12
        网页演示的没有更新,但是插件的代码已经更新了,下载之后可以正常兼容目前的主流浏览器,如果还有其他问题可以发一下
        西瓜0
        2018/6/20 9:21:31

        演示也更新了,缓存问题,注意清下缓存。

        saber0
        2018/6/21 11:32:23
        楼主今天做数据交互时候发现一个拓展问题,就是修改页面;这个页面的下拉框时候,需要进行判断传值,自动修改value值;准备等手头任务完成之后,加个案例上去给大家学习
    回复
    晓东_微博 0
    2018/6/12 11:15:54
    1\火狐浏览器点击无反应
    2\div+ul写进JS里
        saber0
        2018/6/20 8:53:54
        已经兼容火狐的浏览器,演示的插件没有更新,但是下载的插件已经更新,下载的压缩包是最新的版本,能够兼容目前的主流浏览器,可以重新下载
    回复
    是我的海 0
    2018/6/11 14:34:46
    火狐浏览器点击无反应,完全点不动
        saber0
        2018/6/20 8:56:07
        已经兼容火狐的浏览器,演示的插件没有更新,但是下载的插件已经更新,下载的压缩包是最新的版本,能够兼容目前的主流浏览器,可以重新下载
    回复
    ←博士 0
    2018/6/7 15:38:07
    骚年 不错 加油
        saber0
        2018/6/7 15:57:01
        Thanks?(?ω?)?
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复