。

它通常以一个展开的列表形式出现#xff0c;用户可以点击或选择列表中的一个选项。

一般来说#xff0c;他的选项值是由系统代码组成的#xff0c;所以一般是…下拉列表Dropdown

List是一种常见的用户界面元素用于提供一组选项供用户选择。

它通常以一个展开的列表形式出现用户可以点击或选择列表中的一个选项。

一般来说他的选项值是由系统代码组成的所以一般是不能维护里里面的选项值但是经常会出现需要动态维护下拉列表的选项这种需求。

所以今天就教大家如何通过输入框动态维护下拉列表里面的选项值。

一、效果展示

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

【原型预览及下载地址】

https://axhub.im/ax9/09b38389df30358f/#g1p能在输入框里自由编辑选项的下拉列表-js版

二、制作教程

我们如果用axure自带的下拉列表他只能在编辑界面修改下拉列表的值没有办法在演示界面修改。

但是如果我们知道下拉列表的原型就可以通过修改代码的方式实现在演示界面动态维护下拉列表的效果

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

select

value”值”选项1/option所以我们要对输入框里的文本值做变换变换成上面的格式然后在修改代码这样就可以替换下拉列表里的选项值了

那我们怎样对文本框里的值进行处理呢如果可以有特殊标记的话例如用每个选项用【】包围这样我们用replace函数就可以实现了

value”值”将】的值替换成/option但是这种方式会限制了用户输入必须【选项】这种格式来输入这样就很不方便了。

所以我们就要比较麻烦对函数就行分割了首先我们要准备几个文本用来记录和处理文本我们可以用slice函数slice函数可以去指定段落的文本出来例如取前三位就把选项1取出来了这样我们把选项1组成新的文本加上以前一后就变成

option

value”值”选项1/option然后继续取选项2直到输入框里的值都取完。

但是这里还有一个问题用户输入每个选项的长度值是未知的我们怎样去确定要取多少位呢这里我们可以用第二个函数indexOf来确认这个函数可以找出指定内容第一次出现的位置那我们只需要寻找换行的位置提取换行之前的内容再将文本以前一后添加这样就可以将字符转为对应的格式。

option

value”值”选项1/option然后在去第二行的选项2将格式转为option

value”值”选项2/option在通过设置文本将他和前面记录的option

value”值”选项1/option合在一起这里用在target.text后面增加新提取合并的文本即可。

上面是存在换行的条件如果已经是最后一行就没有换那我们就判断输入框是否为空那如果不为空最后一个选项就是输入框里的文本你我们直接将他提取合并即可。

那如果值为空我们就提取完成结束循环结束循环我们用设置文本的交互将提取完成的选项值设置到通过设置文本设置到select/select里面然后触发js重新调用输入框就可以了。

到这里我们基本级完成了如果需要调整下拉列表的尺寸我们也可以通过width和height字段修改例如宽200高30的输入框我们就可以写成这样select

style”width:

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

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