导语：在整个「数据录入场景」中，上篇我们讲到了单选框、多选框、开关。通过较为浅显易懂的方式与大家讲清楚了其中的利弊以及一些逻辑上的使用方法，但是在实际工作中，所遇到的问题远不止文章当中那么简单，工作中遇到那么多复杂的选择器我应该如何设计？这一篇中我们主要会针对下拉选择、日期时间选择 的基础内容进行相应的解析，通过拆解实际工作当中的需求，去了解其背后设计的逻辑。

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

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

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

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

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

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

下拉菜单：

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

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

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

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

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

选择器：

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

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

一、下拉选择的基础拆解

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