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

所属分类:输入-选择框

下拉选择框美化插件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+'-是返回的值')
    }
});
相关插件-选择框

jQuery仿京东移动端地址

jQuery移动端中国省市县级联插件
  选择框
 9395  76
  选择框
 14347  51

jQuery省市三级联动

jQuery省市三级联动(20171115最新全国行政三级联动)
  选择框
 4618  28

选择联系人效果,搜索单个联系人功能(原创)

选择添加联系人效果,并带有搜索功能,实现更好人员选择效果jQuery插件
  选择框
 3910  47

讨论这个项目(11)回答他人问题或分享插件使用方法奖励jQ币

    悦二 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>

        就可以啦

    回复
    仪万里 0
    2018/1/4 8:24:09
    只有提交表单的时候 value才有值。普通按钮 value值得不到。为什么呀。
        r1
        2018/1/5 17:26:24

        获取值的方法:

        1、值在 callback 里有返回,可以传个某个变量。

        2、获取select的值 $('select').val() -- 最好给个id或者class

         ( 亲测可以获取到值哦, 如果疑问你可以把你获取值的代码贴出来我瞧瞧)

    回复
    曾经年少爱追梦 0
    2017/12/29 11:45:30

    ie浏览器里  向下的箭头就会消失

        r1
        2017/12/29 14:27:40

        感谢你的问题,之前是我疏忽了;

        IE可能对background-image不支持,可以替换成background:url();试试;

        还有一种方案是把 箭头图标换成img标签;

    回复
取消回复