下拉选择框美化插件selectFilter.js

所属分类:输入-选择框

 43371  371  查看评论 (23)
分享到微信朋友圈
X
下拉选择框美化插件selectFilter.js ie兼容6

更新时间:2017/12/29 上午11:00:02

更新说明:选择列表超出滚动,css优化。


使用方法

select   --  name 可以接收选择的值【用于表单提交  名称自定义】

option   --  1.  value    传给后台的参数

   2.  selected 设置默认选中

   3.  disabled 设置禁止选则

这里是初始化

$('.filter-box').selectFilter({
    callBack : function (val){
        //返回选择的值
        //做回调 ajax请求
        console.log(val+'-是返回的值')
    }
});
相关插件-选择框

zTree 下拉插件(原创)

基于zTree实现的下拉树型菜单选择
  选择框
 30806  319

省,市,县三级联动完整版

本插件在多位前辈的基础上经过改良,现已功能齐全,支持编辑 查看功能 支持多款主流浏览器,
  选择框
 63582  468

jQuery省市联动、下拉框表单美化

jQuery个人信息表单,联动、下拉框表单美化
  选择框
 42126  403

强大的下拉框美化插件

Select2是一款基于jQuery的专门针对下拉框的美化插件
  选择框
 53237  350

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

    Johnny丶K 0
    2020/9/10 13:28:17
    怎么设置多选啊
        Johnny丶K0
        2020/9/10 13:28:33
        有奖励
    回复
    slient voice 0
    2020/3/14 20:31:30
    怎么让一个页面有多个下拉框?这个明显不支持 回复
    小威威 0
    2019/1/14 10:11:59
    这个怎么做表单验证呢 回复
    江南烟雨 0
    2018/10/31 14:52:11
    结合 vue 的 动态赋值 ,不生效,各位有什么好的办法没有
        一七年十月四号0
        2019/6/21 11:13:09
        老铁,解决没,同事故
    回复
    ①??の埘堠 0
    2018/9/17 12:22:39
    请问 onChange方法在哪写 我写的为什么不管用
        r1
        2018/10/17 14:23:30
        $('.filter-box').selectFilter({
           callBack : function (val){
               //返回选择的值
               //做回调 ajax请求
               console.log(val+'-是返回的值')
           }
        });

        callBack返回的就是change事件了

    回复
    jneevike 0
    2018/6/11 16:22:18
    哥们, 我和 mui.js 同时使用你的js . 在移动端中点击失效. 没有任何的反应.!
        r1
        2018/7/26 16:23:20
        貌似mui是使用tap来触发点击事件的,这个插件用click
    回复
    唐吉 0
    2018/4/24 19:38:26
    动态赋值怎么做
        r0
        2018/4/29 14:30:29
        如果是给下拉选择动态赋值的话,这个插件不支持的
    回复
    悦二 0
    2018/1/17 14:24:03

    看了下,没什么实用价值。1:一个页面不可能只有一个下拉框,一般设置一个class或者属性,就能调用所有。而这个一个下拉框写一个调用语句是什么鬼,2:还不如直接把回调的值只写写回文本框

        r1
        2018/1/18 14:23:51

        ・ 只是一个超级简单的插件,不用太在意那么多功能啦。

        ・ 回调的值和显示的文字在不同情况下是不一样的,我把值传到select里,可以获取select的值,也可以提供表单提交。

        ・ 声明下:

          1、此插件并没有扩展功能

          2、此插件只是把select搬出来自定义样式而已

          3、提供新手学习使用的小插件啦

    回复
    聆听、记忆 0
    2018/1/12 14:26:16
    插件中如果能提供重置、根据value或者text设置选中的行应该会更好,毕竟这两个功能还是挺常用的 回复
    聆听、记忆 0
    2018/1/10 20:11:09

    怎么在事件中重置select呢?

        r1
        2018/1/11 16:09:07

        1. 在<select>的<option>第一个设置值为空的就可以有空的值选择。

        2. 事件的话 :$('select').val(''); - 直接设置为空

        聆听、记忆0
        2018/1/12 14:21:58

        不论之前选的什么,我是想着在事件中重置成默认状态。比如默认设置选了第一个。之后操作过可能选中第四个。现在点击按钮 事件中将select再次重置成默认选中的那一个   

        r1
        2018/1/18 14:25:17

        如果要有一个空的选项你就在第一个添加这个

        <option value="">please select</option>

        就可以啦

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复