先科普一个知识点，下拉菜单与选择器之间的区别

咱们还是老规矩，先科普一个知识点，下拉菜单与选择器之间的区别：

首先，在Ant Design 中，它将下拉菜单（Dropdown）与 选择器（Select）完全拆分开，如果单纯从视觉样式上来看，两者并没有较大差异，因此在日常的方案沟通中容易产生混淆。

而我总结了一下日常描述此组件时出现的不同名称，比如：选择器、下拉选择 、下拉菜单、下拉框、下拉选择器、选择框等等…

那到底应该叫什么？！！！！

首先，为了研究名称的准确性，我查阅了“字典” World Wide Web Consortium （W3C）的cheatsheet文档，其中只存在有选择器 （Select） 这一名词，即选择器；而下拉菜单（Dropdown）是并没有存在的，结合对文档的细致研究，因此总结出使用 “选择器” 进行表达是一个较为规范的说法。

而我们回过头来看，为什么 Ant Deisgn 会将同样的选择拆分为 下拉菜单与选择器呢？其实在实际功能上两者会有较大的不同点。

下拉菜单：

在Ant Design 的解释中，其描述主要是针对 操作 进行集合，主要的使用场景是在导航、工具菜单以及部分操作集合里；但在前端的实际使用中，Dropdown 主要被作为一个下拉容器的入口，他可以在里面放任意的内容，一张图片、一句话、甚至一个视频，都可以在下拉菜单中进行展示。

导航：比如在ＧrowingIO的官网中，通过下拉菜单，他就可以将产品导航进行分组，并且统一放置在一起。

假设我们这时候使用 Select 进行展示的话，它的下拉菜单应该是长这样～（当然，这里肯定不会出现 Select 因为它缺少录入框，这里只是作为举例进行假设）。

工具菜单：比如在 MacOS的全局菜单中，左侧工具菜单都是将所有的操作放置榆次，在 Figma 的软件那种，通过将顶部的工具栏，通过使用下拉菜单进行呈现。

操作集合：比如我们在表格的操作区域经常会使用下拉菜单将很多操作放到一起。

选择器：

主要是针对 选项 进行收折，他是必须包含两个部分，录入框以及下拉选项。使用场景是在表单的中可选项过多之后，会使用选择器将所有选项进行整合；比如我们选择客户的归属人，因为可选择的成员较多，因此通过选择器能够使所有选项进行集中展示。（图片在下方）

其次，两者的混淆，主要是对下拉选项的问题，其实一般对与下拉选项时，大家更通用的表述是下拉菜单，也会因此造成了两者之间的混淆。

一、下拉选择的基础拆解

说到选择，就不得不提起下拉选择，因为其 “简单无脑、适应能力强” 因而成为新手设计师的使用首选；但在使用的过程中经常会出现很多盲点，比如选项过多、下拉菜单过长、如何排序，这些都会在文章后面与大家进行一一解答。

1. 下拉选择器的结构

下拉选择的类型较广，一般由下拉单选、下拉多选、下拉级联选择等…。

因此考虑到实际情况，我设计一个较为完整的结构，大家可以根据实际情况进行阅读拆解。

在结构中，挑选了几个较为重要的结构来为大家进行讲解。

选择录入框：与文本输入框类似，拥有一个外边框，用于提示用户可操作的热区范围。

其主要差距是能与下拉菜单进行联动：

• 当下拉单选，选择了一个选项后，下拉菜单会自动收起，并将选择的值反显到录入框内，进行展示；
• 当下拉多选，选择了一个选项后，下拉菜单会持续展开，并将选项表达为选中状态，进行展示。

右侧标识：每个选择录入中的右侧图标，都是其“身份”的象征，因为在后面要讲到的成员选择、日期选择、时间选择等；在正常状态下除了右侧图标的标识意外，你分辨不出其他地方有着较为明显的差异，也因此在设计的过程中，如何将它们进行合理的区分也是设计需要着重思考的点。