jquery input下拉框选择插件

jquery input下拉框选择插件源码下载

看看谁在用

查看文件目录结构

文件大小:0.04M

素材分类: 插件- 选择和筛选

更新时间:2021-05-21

使用jQuery实现的下拉框选择组件,可以有两列,样式参照了ElementUI。支持模糊查询,自定义下拉列表。

数据格式
let arr = [
  { id: 1, name: 'Java', name2: '爪哇爪哇' },
  { id: 2, name: 'PHP', name2: '拍什么片' },
  { id: 3, name: 'HTML', name2: '简约而不简单' },
  { id: 4, name: 'jQuery', name2: '老夫一把梭' },
  { id: 5, name: 'Android', name2: '安卓' },
  { id: 6, name: 'C', name2: '学不会' },
  { id: 7, name: 'C++', name2: '更加不会' },
  { id: 8, name: 'Struts', name2: '懂哦' },
  { id: 9, name: 'hibernate', name2: '什么东西呀' }
]
调用方法JavaScript代码
// 选中时触发
let callback = function(val) {
    console.log(val)
}
 
// 自定义下拉列表:必须传数组,且每项dom的自定义样式必须为行内样式
// 胡子语法{{ xxx }},括号之间不能用空格,如:{ {} } 无法识别
let liRow = [
    '<div class="fl" style="width:130px;">{{ name2 }}</div>',
    '<div class="fl" style="width:90px;">{{name}}</div>'
]
 
$('#div').cmzSelect({
    // #div为容器
    id: 'id', // 唯一标识
    currentId: 1, // 当前选择的数据
    arr, // 数据源
    label: 'name', // input展示数据
    callback, // 回调函数
    liRow, // 自定义下拉列表(可以不传)
    searchList: ['name', 'name2'] // 模糊查询字段列表
})
 
$('#div2').cmzSelect({
    id: 'id', // 唯一标识
    arr, // 数据源
    label: 'name', // input展示数据
    callback, // 回调函数
    searchList: ['name'] // 模糊查询字段列表
})

jquery input下拉框选择插件

正在加载文件目录...

追梦666666666666666666下载了 此素材
ZYK$&@下载了 此素材
More下载了 此素材
下载了 此素材
.下载了 此素材
Mr丶差不多下载了 此素材
下载了 此素材
9.13下载了 此素材
绽放梦想的旅程下载了 此素材
smcm.com.cn下载了 此素材

也许你还喜欢

  1. js虚拟树菜单插件多选
  2. jQuery漂亮的Select下拉框插件
  3. 支持搜索下拉框插件vanilla-select.js
  4. jQuery仿百度搜索框下拉自动补全插件
  5. 漂亮的多级Dropdown下拉框
  6. jQuery带图标下拉框插件
  7. jQuery下拉自动补全插件搜索
  8. Bootstrap4输入框下拉多选择插件
App软件开发公司网站界面HTML5模板
  • 标签查找|关于我们|用户协议|格式化工具|bootstrapmb.com 版权所有
  • 背景样式编辑器|按钮样式编辑器|背景动效编辑器|图片布局编辑器