Dependent Controls 是一个用于快速轻松地制作依赖下拉列表的库。它是用纯 ES6 JavaScript / TypeScript 编写的,没有任何依赖项。该库支持 SELECT、单选按钮和任何其他自定义 HTML。任何 CSS 框架都可以用于样式设置。
一般特征
该库支持 SELECT 下拉菜单、单选按钮和任何自定义 HTML……
任何 CSS 框架或自定义 CSS 都可用于样式设置。
该库是用现代 ES6 + TypeScript 编写的;不需要依赖项。
它具有三个数据源选项:一个 JSON 文件、一个直接 JavaScript 对象或一个自定义函数,可最大限度地提高灵活性并允许执行 AJAX 请求。
有本地存储、会话存储和 cookie 支持。
深层链接支持。
包含大量文档。
在同一页面上可以有任意数量的控件。
用户最终定义了页面的所有外观;该库具有最少的 CSS 样式。
例子
Bootstrap CSS 框架下拉示例
Bootstrap CSS 框架单选按钮和开关
Bootstrap CSS 框架混合控件
Tailwind CSS 框架下拉示例
Tailwind CSS 框架单选按钮和开关
Tailwind CSS 框架混合控件
Bulma CSS 框架示例
基础 CSS 框架示例
纯 CSS 和 AJAX 请求
具有五个嵌套级别的 AJAX 示例
使用 <optgroup> 选择
带有深层链接的下拉菜单
数据源
该库支持三个主要数据源:
单个 JSON 文件。在这种情况下,所有数据都放在一个 JSON 文件中,该文件在页面加载时加载一次。
Javascript 对象。这个数据源是最简单的。只需创建一个 JavaScript 对象并通过 dataSource 属性将其传递给库。
自定义功能。自定义函数允许应用任何逻辑,例如,从服务器端获取数据(通过 AJAX 请求)。
存储和深层链接
该库支持存储以保存当前状态并在页面刷新或按下后退按钮时恢复它。
本地存储——这是一种持久存储,即使用户关闭浏览器也会保留数据。
会话存储——浏览器会话结束时将被清除,通常在用户关闭浏览器时。
Cookies – 与本地和会话存储不同,cookie 值也可以在服务器上使用。也可以定义 cookie 的到期日期。
深度链接 – 将用户直接发送到预定义的下拉选择状态的特殊链接。
回调和 API
该库具有各种回调函数,可用于应用自定义逻辑:
提交。
重置。
onChangeStart。
onChangeEnd。
禁用控制。
启用控制。