杭州企业准备改外贸询价表单,设计稿里的下拉选择器很好看,但是否需要自定义,应由真实选择任务决定。少量固定选项、可搜索的大目录和允许自由输入的需求并不一样。先说清用户必须完成什么,再比较浏览器原生能力与自定义实现要承担的工作。
把需求分成选择规则与视觉要求
- 选项是否有限且稳定,是否只允许选择一个。
- 用户能否暂时不知道答案,是否有待确认选项。
- 是否必须搜索大量选项,搜索匹配规则由谁维护。
- 是否允许填写列表之外的内容,后端怎样区分它。
| 问题 | 原生select | 自定义组合框候选 |
|---|---|---|
| 固定单选 | 浏览器提供基础选择交互 | 需要实现并维护等价操作 |
| 可输入和筛选 | 不能仅靠普通select假装已有此功能 | 需定义输入、建议、选择与提交关系 |
| 键盘及辅助技术 | 仍需标签、选项与真实环境复测 | 还需设计焦点、展开状态及对应键盘行为 |
| 手机表现 | 可随浏览器和系统而不同 | 由具体实现决定,不能只验收桌面 |
一个简单任务,先用简单演示说明
<label for="request-type">咨询类型</label>
<select id="request-type" name="request_type" required>
<option value="">请选择</option>
<option value="wholesale">批发合作</option>
<option value="retail">单件购买</option>
<option value="unsure">暂不确定</option>
</select>这段演示只解释显示文字、提交值和未选择状态的关系。它没有搜索、接口、入库或通知能力。即使前端required阻止空选择,后端仍需按业务规则校验允许值;用户选择暂不确定也应有真实接收方式,不能静默丢弃。
验收按操作路径走一遍
1识别用户知道这一项在问什么。
2选择鼠标、键盘及手机可操作。
3反馈知道当前选择和未完成原因。
4接收实际提交值按规则进入系统。
有搜索框就一定适合很多选项吗?
还要核对选项命名、匹配、空结果和后端可接受范围。控件不能解决混乱的业务字典。
交付时保存选择理由和受控操作记录,后续新增选项或改业务流程才能知道应复测哪里。不要用一次看起来顺手的演示替代真实手机、实际语言与接收链验证。