> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 级联选择

> 本文档介绍了具有层次性和联动性的选项信息组件，适用于创建主类目及其子类目的场景，如部门选择、城市选择等。文档详细描述了该组件的基础功能（包括显示搜索、清除按钮及使用数据源增减修改部门）以及常见问题解答。

## 1. 适用场景

选项信息是一对多的关系，且具有层次性和联动性，多用于创建主类目和所属下级子类目的场景，多用于部门选择，城市选择（比如省市区）等包含有层次关系的场景。

<Note>
  组件属性以及使用和示例请[**点击此处**](/zh/open/yida/components/form/cascadeSelectField)查看
</Note>

## 2. 基础功能

### 2.1 显示搜索

是否允许在输入框页面直接输入内容进行搜索，当层级过多时，可以开启搜索功能快速定位。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639029120178-af16a4cc-4b19-46c2-9a98-3a922721731a.png)
</Frame>

显示搜索

**效果如下：**

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639029239504-25e01d6a-0206-44c6-ae3c-f19329f93e3f.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639029322024-234fe98e-833e-4933-a2ab-9bf7190f46d8.png)
</Frame>

### 2.2 清除按钮

清除选项框内的内容

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639029355676-a9cd134a-73c8-4798-abe1-f54a1c7351fc.png)
</Frame>

清除按钮

**效果如下：**

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1623807255294-9a16a7a1-818d-4d23-bc50-cc7e05b7720d.png)
</Frame>

### 2.3 使用数据源增减修改部门

点击编辑代码之后可以看到该级联选择的数据源，都是在这里面修改增减主类目和子类目。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639029399877-86b9f2f0-cacc-4f25-84e7-886f81342337.png)
</Frame>

数据源

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639029456866-da4375a1-e081-456c-8503-d0bd5023267d.png)
</Frame>

第一层级和第二层级分别对应的数据源内的结构：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1623807273211-47bb3b66-e9e3-4845-be77-c7dea3cd942a.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1618470956219-854380c0-0acf-4b2d-9042-aa99d361b530.png)
</Frame>

举个例子：想要在部门、产品下面再新增选项为新部门，具体操作见下图三到图五：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1618469701347-63b31a15-a845-4237-a725-f24bf69289fd.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1618469872824-378a6de2-8f93-4aa5-9437-32463e7b0043.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1618470113333-be1396a0-8485-400f-8fe0-e3d898398438.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1618470188391-7a0bac2f-9edb-44dc-90a7-e59c04f7a8e7.png)
</Frame>

## 3. 常见问题

<AccordionGroup>
  <Accordion id="q1" title="3.1 如何增加子类目，也就是下属层级？">
    <Frame>
      ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1618301709444-c9ee0192-9737-4eb5-8bcb-640e68510f6f.png)
    </Frame>

    <Frame>
      ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1618300975757-82ecc902-04e5-4e05-bbad-91fb956aca87.png)
    </Frame>

    最终效果：

    <Frame>
      ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1623807301043-80e0278a-87d8-4777-bc3b-80d95363f342.png)
    </Frame>
  </Accordion>

  <Accordion id="q2" title="3.2 如何增加选项内容？">
    <Frame>
      ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1618301334841-f2a36a63-95b7-4785-ac54-ead0d9e7e78b.png)
    </Frame>

    <Frame>
      ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1618301651524-69d80c29-b436-4f15-9ce1-04e211a056eb.png)
    </Frame>

    最终效果：

    <Frame>
      ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1623807317387-e74c189b-9e0d-4265-b90d-c8f8189f6e55.png)
    </Frame>
  </Accordion>

  <Accordion id="q3" title="3.3 为什么都复制了层级结构，但设置却没有生效？">
    注意是否复制了完整的结构，比如【\{}】【\[]】这些符号是否有一起复制，以及是否有在对应的地方添加逗号，且是英文状态下的逗号，最后可以删除重新添加组件试试。
  </Accordion>
</AccordionGroup>