jQuery模拟select下拉框插件SelectBox

所属分类:输入-选择框

jQuery模拟select下拉框插件SelectBox ie兼容8

更新时间:2017/8/3 下午5:49:29

更新说明:修改了 focus 输入时下拉框选中失效问题。  谢谢发现问题的朋友!


更新时间:2017/8/1 下午12:40:19

更新说明:输入不在下拉框内的值时,返回的name值出错。已修改。(谢谢发现这个问题的使用者)


更新时间:2017/7/27 下午3:46:16

更新说明:

1. 解决了点击选择框时,其他选择框不收回的BUG。

2. 当 allowInput 参数为false时不允许输入,但只能点击下拉按钮拉开下拉框。 现更新为,点击整个框都可以拉开下拉框。

3. 增加 retur 参数,选框在建立时默认执行了一次回掉函数,将此参数设为true,则阻止了这个默认函数执行。

4. changList 方法中同样增加了如上 retur参数 changeList(data,opts)   opts参数{retur:false};

5. 增加了setValue(name)方法 可通过js改变框内的值

这是最终版了,满足我现在工作中的所有需要了。如有疑问或bug 请留言


此筛选框最主要的特色就是可以 自己输入信息,也可以模糊性查找,也可以点击下拉内容,同时输入对应信息,自动渲染。

具体如下,不懂请留言

使用方法

1. 引入jquery和此SelectBox.min.js

2. 准备一个盒子,假定class名为checkbox

3. 一行代码建立筛选框  var select=new SelectBox($('checkbox'));

4.。over 。。具体参数看下边。想让你的框边什么样就什么样。

var select = new SelectBox(obj, data, fn, opts); //建立 select框对象
参数说明 obj: jquery对象
data: 下拉框里的数据(数据), 数组里可以是值, 也可以是json, 如果是json有对应的dataName和dataId
fn: 回掉函数 参数为 {
    name: name,
    id: id
} //name是输入框内容  id是隐藏value
opts: {}, 设置参数
dataName: 'name', //option的html
    dataId: 'id', //option的value
    fontSize: '14', //字体大小
    optionFontSize: '14', //下拉框字体大小
    textIndent: 4, //字体缩进
    color: '#000', //输入框字体颜色
    optionColor: '#000', //下拉框字体颜色
    arrowColor: 'green', //箭头颜色
    backgroundColor: '#ccc', //背景色颜色
    borderColor: 'green', //边线颜色
    hoverColor: 'green', //下拉框HOVER颜色
    borderWidth: 1, //边线宽度
    arrowBorderWidth: 0, //箭头左侧分割线宽度。如果为0则不显示
    borderRadius: 5, //边线圆角
    placeholder: '请输入文字', //默认提示
    defalut: 'firstData', //默认显示内容。如果是'firstData',则默认显示第一个
    allowInput: true, //是否允许输入
    width: 130, //宽
    height: 26, //高
    optionMaxHeight: 500 //下拉框最大高度

方法  

  • changeList(data) 改变数据

  • changeFnBack(fn)  改变回掉函数

  • getResult() 获取当前选择项

相关插件-选择框

jQuery+css3下拉选择框

下拉选择,动画效果
  选择框
 17822  85

漂亮的htm5单选、多选框

漂亮的htm5单选、多选框
  选择框
 18216  49

移动端pc端地区选择插件

兼容移动端的地区选择插件
  选择框
 6926  42

jQuery地区选择(三级联动)

jQuery中国地区选择(最新地区数据全)三级联动插件
  选择框
 3917  23

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

      0
    2017/11/6 18:00:04
    偶像之路 0
    2017/11/6 10:04:54

    请问楼主,如果我输入一个原本没有的值该如何做

        kmh02280
        2017/11/6 10:50:59
        也触发事件了,返回的name是个值,id是'error'
        偶像之路0
        2017/11/8 9:10:28

        请问是在哪里去写,error是不是不用管,可以传入后台

    回复
    微笑过后丶 0
    2017/10/30 10:34:33

    setValue函数怎么使用呢

        kmh02280
        2017/10/31 15:59:01

        直接给个name的参数就可以了

    回复
    tianya092 0
    2017/9/27 10:59:58
    贵州钟鼎网络科技 0
    2017/9/8 19:27:46

    data里对应的值必须是name,id吗,可以是其他字段吗?我改成其他字段,没有效果

        kmh02280
        2017/9/9 21:28:35

        可以改成其他字段。但是你要在 dataName和dataId 参数里告诉他你改成了什么

    回复
    浅逝。 0
    2017/9/7 16:18:48
    紫露凝香 0
    2017/7/25 15:45:02
    紫露凝香 0
    2017/7/25 15:34:39

    data里对应的值必须是name,id吗,可以是其他字段吗?我改成其他字段,没有效果

    回复
    苦未尽糖亦苦 0
    2017/7/21 15:27:50

    很好,受用了,谢谢

    回复
取消回复