Axure级联操作问题

Question

看了您的帖子：

axure 如何设置选项联动_Axure教程：网页二级联动交互应该怎么做？-CSDN博客 文章浏览阅读754次。本文详细介绍了如何使用Axure实现网页二级联动交互，通过步骤(1)设置下拉列表框，(2)添加动态面板，(3)配置省的下拉选项，(4)设置市的动态面板内容，以及(5)定义选项改变时的交互事件，最终完成从省到市的联动效果。案例展示了安徽省、山东省和河北省的联动实例。 https://blog.csdn.net/weixin_42476987/article/details/113022393?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-113022393-blog-135701633.235^v43^control&spm=1001.2101.3001.4242.1&utm_relevant_index=3

想请教一下为啥感觉按步骤做了还是无法正常显示级联关系呀：
如图

没感觉自己的步骤有问题，可以请教一下您吗？

Answer 1

晚上好🌙🌙🌙
本答案参考ChatGPT-3.5

您好！对于Axure级联操作的问题，我建议您可以参考以下步骤：

1. 设置下拉列表框

在Axure中，我们可以创建一个下拉列表框来显示候选省份信息。首先，在右侧工具栏中选择“列表”工具，并在页面上画出一个下拉列表框。然后，点击“新建选项集”按钮，以便输入更多的选项。

<Apex:OptionSet label="省份">
    <Apex:Option value="安徽">安徽</Apex:Option>
    <Apex:Option value="山东">山东</Apex:Option>
    <Apex:Option value="河北">河北</Apex:Option>
</Apex:OptionSet>

在这个示例中，我们已经创建了一个名为“省份”的选项集，包含了三个选项“安徽”、“山东”和“河北”。每个选项都有一个特定的值，用户可以根据这些值在下拉列表框中选择相应的省份。

1. 添加动态面板

为了让用户能够自定义他们在下拉列表框中看到的内容，我们需要为用户创建一个动态面板。首先，我们需要选择“动态面板”工具，并在页面上绘制一个新的动态面板。然后，点击“保存结果”按钮，以便将所选的结果保存为HTML文件。

<mid触摸start="showDropdown(listValue); displayDynamicPanel(); return false;">动态面板</mid>

在这个示例中，我们创建了一个名为“动态面板”的动态面板，它包含了一段JavaScript代码，该代码会在用户触摸屏幕时开始运行。

1. 配置省的下拉选项

为了让用户能够在下拉列表框中查看每个省份的具体内容，我们需要为每个省份分配一个单独的选项。我们可以在上述的“省份”选项集中创建多行文本，并将其作为子选项添加到下拉列表框中。

<mid touchstart="setOptionText('省份', listValue[0]); return false;">省份名称</mid>
<mid touchstart="setOptionText('省份详细信息', listValue[1]); return false;">省份详细信息</mid>

在这个示例中，我们分别为每个省份分配了两个选项：一个文本框用于显示省份名称，另一个文本框用于显示省份详细信息。

1. 设置市的动态面板内容

为了让用户能够在下拉列表框中查看每个城市的具体内容，我们需要为每个城市分配一个单独的选项。同样，我们可以在上述的“省份”选项集中创建多行文本，并将其作为子选项添加到下拉列表框中。

<mid touchstart="setOptionText('城市名称', listValue[2]); return false;">城市名称</mid>
<mid touchstart="setOptionText('城市详细信息', listValue[3]); return false;">城市详细信息</mid>

在这个示例中，我们分别为每个城市分配了两个选项：一个文本框用于显示城市名称，另一个文本框用于显示城市详细信息。

1. 定义选项改变时的交互事件

最后，我们需要编写一些事件监听器来处理用户的交互行为。例如，当用户选择一个省份时，我们可以调用一个函数来获取用户选择的省份，并将其作为参数传递给动态面板中的函数。

<mid touchstart="onTouchStart(listValue); return false;">下拉列表项被触摸</mid>
<mid touchmove="onTouchMove(listValue); return false;">下拉列表项移动</mid>
<mid touchend="onTouchEnd(listValue); return false;">下拉列表项被结束拖动</mid>
<mid touchcancel="onTouchCancel(listValue); return false;">取消选定</mid>
<mid onAfterUpdate="onAfterUpdate(listValue); return false;">更新动态面板内容</mid>

在这个示例中，我们编写了一些事件监听器，分别处理了下拉列表项被触摸、移动、结束拖动和取消选定的操作。同时，我们也定义了一个函数来更新动态面板的内容。

希望这个答案能帮助您解决问题。如果您还有其他问题，欢迎随时向我提问。