Axure高保真教程：通过文本框维护下拉列表选项

2023-06-16 20:01:24 来源：人人都是产品经理 A+A-

常见的用户界面元素之一是下拉列表（Dropdown List），提供一组可选项供用户选择。该元素通常显示为展开的列表形式，用户可以通过单击或选择列表中的选项。对于下拉列表的选项，一般由系统代码组成，因此通常无法对其进行维护，但有时会需要动态更新下拉列表的选项值。本文将介绍如何通过输入框实现下拉列表选项值的动态更新。

下拉列表（Dropdown List）是一种常见的用户界面元素，用于提供一组选项供用户选择。它通常以一个展开的列表形式出现，用户可以点击或选择列表中的一个选项。

一般来说，他的选项值是由系统代码组成的，所以一般是不能维护里面的选项值，但是经常会出现需要动态维护下拉列表的选项这种需求。所以今天就教大家如何通过输入框动态维护下拉列表里面的选项值。

(资料图)

一、效果展示

在输入框里新增或者修改选项，维护后下拉列表选项和输入框里的一致选项可以手动修改，也可以批量复制到输入框

二、制作教程

1. 下拉列表的原理

我们如果用axure自带的下拉列表，他只能在编辑界面修改下拉列表的值，没有办法在演示界面修改。但是如果我们知道下拉列表的原型，就可以通过修改代码的方式，实现在演示界面动态维护下拉列表的效果

我们知道axure演示是通过浏览器来实现的，归根到底就是html、js、css代码，这个在以前的js调用的文章里也有详细讲解，所以我们可以通过代码调用，调用下拉列表，那下拉列表的html代码其实就是：

。

这样我们就制作完成了通过文本框维护下拉列表选项的原型模板了，下次使用时，只需要复制粘贴，修改输入框里的选项文字，即可自动实现动态维护下拉列表选项的效果了，是不是很方便呢？当然，后续你们也可以根据需要，增加一些效果，例如把输入框放在弹窗里，通过按钮显示弹窗，再修改下拉列表的值。

那以上就是本期教程的全部内容，感兴趣的同学们可以动手试试哦，感谢您的阅读，我们下期见。

本文由 @AI产品人原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议

该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。

关键词：