Selectize.js Option Groups optgroup optgroups 参数的使用方法

selectize是什么东西?它是用来代替原生html标签select一个jQuery插件。众所周知,原生的select既不好看又不好用,所以我们一般选择用一些插件来模拟生成,比如Chosenselect2等等。而selectize是我认为最好用的一个。

selectize演示,它是支持 Option Groups 的,
图片描述

但它演示的是selectize会将原生htmloptgroup模拟成selectize样式的optgroup

而我需要的是根据我的数据由selectize生成optgroup
没关系我再看文档,按下Ctrl+F搜索optgroup,果然有相关参数,
图片描述

但或许是我英文水平太烂,或许是它确实没写清楚怎么使用(估计前者的可能性更大一点),反正是没有很直观的知道怎么用。

没关系,还有谷歌嘛…… 可是还真就搜不到相关解答,
算了,作为一名优秀的程序员,没有点分析能力,怎么行走江湖……
这个optgroups要么是接受一个树状数组,要么就是和options分别代表两个表,然后用一个字段关联,还能有啥第三种可能吗?
估计关联的可能性更大一些,于是就这么一试:

$('#distSub').selectize({
    options: [
        {text: 'aaa', value:'AAA', optgroup:'a'},
        {text: 'abb', value:'ABB', optgroup:'a'},
        {text: 'acc', value:'ACC', optgroup:'a'},

        {text: 'caa', value:'CAA', optgroup:'c'},
        {text: 'cbb', value:'CBB', optgroup:'c'},
        {text: 'ccc', value:'CCC', optgroup:'c'},
    ],
    optgroups: [
        {label: 'CC', value:'c'},
        {label: 'AA', value:'a'}
    ]
});

还真就可以了……
图片描述

代码一出,还看啥文档……
optgroups, optgroupValueField, optgroupLabelField, optgroupField 分别代表什么,你我心知肚明……


王道中强流
不为繁华易匠心

在福州“土生土长”的 1986 年老程序员一枚,专注 Web 技术三十年。

1.7k 声望
44 粉丝
0 条评论
推荐阅读
Linux自动备份MySQL
首先找到你的MySQL配置文件my.cnf {代码...} 然后修改它, {代码...} 在[client]里增加三行: {代码...} 本来不需要这些操作,直接把用户名密码写到备份脚本里就可以,但是 MySQL 5.6 之后在命令行里写密码会出现...

王道中强流阅读 2k

三年前端的2022,如果创造比卷更有趣,那为何创造不能成为主旋律?
up主2019年毕业,找了一份前端工作,一直干到现在。2019年末出现疫情,三年的时间,也差不多与我的职业生涯完全重合了。刚过去的2022年,我也没有避开阳的命运(这病毒是真的强),就12月这一个月时间,几乎全公...

Gomi10阅读 2.1k

封面图
3个容易混淆的前端框架概念
大家好,我卡颂。有3个容易混淆的前端框架概念:响应式更新单向数据流双向数据绑定在继续阅读本文前,读者可以思考下是否明确知道三者的含义。这三者之所以容易混淆,是因为他们虽然同属前端框架范畴内的概念,但...

卡颂6阅读 577

封面图
从JQuery出发总结的关于原型使用上的一些浅薄理解
MyObj本身是一个对象,可以通过MyObj.doit()的方式调用其上的方法或属性为了实现需求,第一反应是: {代码...} 然后在MyObj上挂载静态方法,在MyObj.prototype上挂载对象方法。

zxl200707014阅读 342

封面图
Ajax实现搜索联想 搜索关键词提醒 无刷新搜索
通过javascript监听搜索框的内容,调用后端即可。(1)javascript监听搜索框的内容(2)把搜索框的关键词传给后端进行搜索(3)搜索到结果,遍历到页面

TANKING1阅读 4.7k

【永久开源】Pear Admin Layui 基于 Layui 的后台管理模板
Pear Admin Layui 是基于 Layui 的后台管理系统模板,扩展Layui原生UI样式,整合第三方开源组件,提供便捷快速的开发方式,延续LayuiAdmin的设计风格,持续完善的样式与组件的维护,基于异步Ajax的菜单构建,相对...

就眠仪式2阅读 7.1k评论 1

Apache APISIX 2.12.0 版本发布,新功能更适配新一年!
继 2.11.0 版本发布之后,Apache APISIX 也在即将到来的新春佳节,为大家带来 2022 年第一个带有新功能的版本。在此也算携手新版本给大家拜个早年了!

API7_技术团队1阅读 1.2k

封面图

在福州“土生土长”的 1986 年老程序员一枚,专注 Web 技术三十年。

1.7k 声望
44 粉丝
宣传栏