JS 得到选中的下拉列表的序号 或者 显示的内容

本文提供了一个HTML下拉列表的示例,并展示了如何使用JavaScript获取用户选择的选项值、索引及显示内容。

 

备忘所用,也希望给广大网友以提示作用。

打开 Axure RP,点击「新建项目」→ 选择「空白项目」→ 命名为 “失效分析原型”。 把你提供的两个界面截图保存到电脑(方便对照还原)。 步骤 2:复刻 “失效统计” 界面(第一页) 先做顶部导航、筛选区、表格 + 图表区这几个模块: 2.1 顶部导航栏 拖入「矩形」组件,设置宽度 = 页面宽度(比如 1920px)、高度 = 40px、填充色 =#333333(深色背景)。 拖入「标签」组件,输入 “失效分析 / 失效统计”,设置字体 = 微软雅黑、字号 = 14px、颜色 = 白色,放在导航栏左侧。 拖入「下拉列表」组件,输入 “电站相关失效图”,设置字体 = 14px、颜色 = 白色、背景透明,放在导航栏右侧;再拖入「标签」+「头像」组件,输入 “admin 管理员”,放在下拉列表右侧。 2.2 筛选条件区 拖入「矩形」组件,设置宽度 = 页面宽度、高度 = 120px、填充色 = 白色,作为筛选区背景。 拖入「标签」组件,输入 “统计周期:”,再拖入「下拉列表」组件,输入 “近一年”(设置宽度 = 100px);旁边拖入「输入框」组件,输入 “2021-09-14”“2022-09-14”(模拟日期选择框)。 拖入「标签」输入 “主变漏油”,再拖入多个「矩形」+「标签」组合,还原 “失效要素” 的筛选栏(比如 “电站”“设备” 等按钮,设置按钮样式:边框 = 1px 蓝色、背景 = 浅蓝色),最后拖入「按钮」组件,输入 “查看”(样式:蓝色填充、白色字体)。 2.3 表格 + 图表区 左侧表格:拖入「表格」组件,设置 7 行 3 列,表头输入 “序号”“失效原因”“频次”“占比”,然后填入数据(大风、密封垫圈老化等);表格上方拖入「标签」输入 “答案 (7)”,旁边加「按钮」输入 “下载”。 右侧图表:Axure 自带图表功能有限,这里可以用「矩形 + 折线」模拟(或插入截图后设置为 “占位图”): 拖入多个「矩形」,设置不同颜色(对应失效原因),调整高度匹配 “频次” 数据; 拖入「折线」组件,连接各矩形顶部,模拟 “累计百分比” 曲线; 拖入「标签」输入 “失效原因占比排列图”“频次(次)”“累计百分比(100%)” 等说明文字。 步骤 3:复刻 “失效归因” 界面(第二页) 和 “失效统计” 复用部分组件,调整细节: 3.1 顶部导航 + 筛选区 导航栏文字改为 “失效分析 / 失效归因”,右侧下拉列表改为 “失效图谱 - 开发”。 筛选区标题改为 “2 号主变油污”,失效要素栏的 “设备” 改为 “天北 66kV 变电站”、“设备缺陷事件” 改为 “2 号主变油污”、“缺陷模式” 改为 “埋深不足”。 3.2 内容区(左侧 + 右侧) 左侧 “可能原因” 区: 拖入「矩形」作为背景,输入 “可能原因 (20)”,旁边加「下拉列表」输入 “紧密度”; 拖入「标签」输入 “大风”,下方加「按钮」输入 “排查措施”,再拖入「文本框」输入 “设备缺陷事件:架空地线连板连针锈蚀,需更换” 等内容; 拖入「标签」输入 “相关设备:”,下方拖入多个「按钮」组件,输入 “天北 66kV 变电站”“220kV / 箭突 1 号线 042 号” 等设备名称。 右侧 “相关文档 / 图片 / 案例” 区: 拖入「选项卡」组件,设置 3 个标签:“相关文档”“相关图片”“相关案例”; 在 “相关图片” 标签下,拖入 2 个「图片」组件,插入对应截图(或用矩形 +“图片” 文字占位); 下方拖入「标签」输入 “相似现象:”,再拖入「列表」组件,填入 “一号主变油污” 等内容。 步骤 4:优化样式与交互 统一样式:把所有按钮、输入框的字体、颜色、边框统一(比如按钮用蓝色 #409EFF,输入框边框 1px #E6E6E6)。 简单交互(可选):给下拉列表添加 “展开 / 收起” 交互(选中下拉列表→「交互」→「鼠标点击时」→「显示 / 隐藏」下拉选项);给 “查看更多” 按钮添加 “显示隐藏内容” 交互。 这是详细步骤,告诉我在axure里该怎么做
最新发布
12-17
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值