在现代软件系统的界面设计中,下拉框组件是用户与系统交互的重要桥梁。它不仅为用户提供了一个简洁明了的选择方式,还为系统提供了一种有效的数据输入手段。其中,两个下拉组件之间的数据关联筛选成为一种常见且实用的交互设计。JVS低代码可以通过简单的配置实现。它利用技术手段,根据用户的操作实时更新另一个下拉组件的选项,从而减少用户在多个下拉组件之间切换和选择的时间。

两个下拉组件数据关联筛选

通常软件系统中会有这种功能:用户使用一个下拉组件进行选择时,另一个下拉组件会自动更新以显示与第一个组件所选值相关的选项。它可以减少用户在多个下拉组件之间切换和选择的时间,从而实现更高效的选择过程,更快地找到所需选项,从而提高用户体验和效率。

JVS低代码平台示例演示

图片

配置方式

图片

进入表单设计器,选择两个下拉框组件,需要哪一个下拉框选项动态显示就对哪一个下拉框进行配置。点击【设置条件】进行动态数据项设置。
图片

①:显示项设置,按照绑定字段对应的数据值显示,绑定字段的值类型必须一样(如:数据id对应数据id,字符串对应字符串)当下拉框数据来源是配置数据时就此项设置。
图片

②:可选项设置,下拉框数据来源是模型数据时,选择的关联模型中的字段数据id(下拉框的储值和传递都是数据id)。
③:匹配规则,有等于、模糊匹配、等于空和包含,当下拉框是多选时选择包含匹配。
④:匹配类型,可选字段和自定义,字段选择来自当前下拉框组件对应字段。
⑤:添加行可设置多个条件。
图片

下拉框选项数据来源是模型数据时我们可以通过可选项设置配置动态禁用显示。
在线demo:https://frame.bctools.cn/
开源框架:https://gitee.com/software-minister/jvs


软件部长
43 声望6 粉丝

软件研发行业老司机,提供些踩坑的经验而已