Two component values control the status of the other component

JS 动作面板 - 前端代码开发 | 钉钉宜搭·帮助中心

能力免费版轻享版专业版专属版页面JS代码不支持不支持支持支持1. 功能概述用户可以通过宜搭中的「动作面板」去写 JS 代码，从而实现自己的业务逻辑或逻辑判断。通过动作面板，您可以「更加方便的组织和复用代码」、「实现复杂交互」。注意：通过JS面板编写的逻辑一般情况下是不会对历史数据生效的。2. ...

https://docs.aliwork.com/docs/yida_support/lbtl0t/ocmxyv

1. Case Background

When the association option setting of a single component cannot meet the business requirements, we need to display another component when multiple components meet a certain condition at the same time. For more information, see the following example.

2. Achieve results

💡Single-line text C is displayed when drop-down radio A selects option 1 and drop-down radio B selects option 2.

3. Implementation steps

3.1 create forms and component configurations

3.1.1 create a form

Path: Enter the created application> upper left corner of the page + sign> create a common form/flow chart (select any form type)

Create a form

3.1.2 component types and configurations

Drop-down radio A: drop-down Radio

Drop-down radio B: drop-down Radio

Single-line text C: single-line text

3.1.3 set single-line text C status to hidden

Set single-line text C to hidden

3.2 page JS configuration

3.2.1 create A OnChange in drop-down radio A

Drop-down radio A create OnChange action

3.2.2 write the following code within the OnChange action

Sample code:

  const a = this.$("下拉单选A的唯一标识").getValue();
  const b = this.$("下拉单选B的唯一标识").getValue();

  
  if (a == "选项一" && b == "选项二" )
  {
    this.$("单行文本C的唯一标识").setBehavior("NORMAL")
  }
  else
  {
    this.$("单行文本C的唯一标识").setBehavior("HIDDEN")
  }

3.2.3 bind this OnChange action in drop-down radio B

Note: The two drop-down options are bound to the same action.

Drop-down radio B create OnChange action

5. Effect demonstration

Perform the following operations to achieve three different effects:

1. Drop-down option A selects option 1 and drop-down option B selects option 3. Single-line text is not displayed.
2. Drop-down option A Selects Option 1, drop-down option B Selects Option 2, and A single line of text is displayed.
3. Drop-down option B changes option 2 to Option 3 and hides single-line text.

-------------------- Get the latest information YIDA, welcome to follow US--------------------