Jquery 旁边的可链接图标

我正在开发一个API，它返回一些打印产品配置。配置分组在选择框中，每个框都有不同的选项。对于某些选项，有一个特殊的外部链接，如信息视频等

您可以在以下两幅图中了解接口以及我从API获得的XML数据：

如您所见，同一选择框中可能有两个或多个选项的视频链接。如果不是这样的话，我会存储链接并将其显示在手风琴标题旁边。但是，由于可能有多个选项的链接，从用户体验的角度来看，每个链接都必须位于其选项附近的某个位置，即界面图像中的红色和绿色箭头

从我目前发现的情况来看，有一些技术可以使用属性数据图标来显示图标，我已经测试过了，但根本不起作用。但即使它工作，它只是显示一个图标，而我需要的是，这个图标也可以链接到一个外部网站

我知道这是不容易实现的，特别是因为图标将位于标签内

所以，我在考虑一个图标，它将以某种方式与适当的选项对齐

但我想不出任何办法来做到这一点。任何帮助都将不胜感激。蒂亚

编辑：我忘了提到，虽然界面看起来不像一个选择框，但事实上，它们是选择框，其大小属性设置为每个选项的数量。然后通过一些jQuery，我获取所选值的标题并将其附加到accordion的标题中。这就是我制作界面的方式

编辑2：你可以在这里看到我的问题：

在界面中，右边的代码图标显示了API对特定选择框的响应，因为这是一项正在进行的工作，我需要对响应进行大量研究

---

因此，如果单击a_paper选择框的代码图标，您将看到API返回所有可用选项中7个选项的信息视频externalLinks XML标记

这是一个使用单选按钮的粗略版本。按钮通过css隐藏，标签是用户的实际界面

然后，您仍然可以通过单选按钮的名称使用表单元素

//这是连接事件处理程序的更好方法 //而不是内联javascript var radios=document.queryselectoral.selctRadio输入[type=radio]； fori=0；i a_格式 210 x 75毫米 52 x 74毫米A8 74 x 105毫米A7 210 x 75毫米 a_格式 210 x 75毫米 90 gsm涂层艺术纸 115 gsm涂层艺术纸 130 gsm涂布艺术纸

---

好的，我重新设计了这个，用按钮列表代替选择框。当然，我保留了用于提交表单的选择框，但我将它们隐藏起来

由于我想保留我的原始JS，选择框的一次更改处理了选择顺序中的间隙，即在第4个框上进行选择后，直接转到第6个框，第5个框为空，因此我采用了以下方法：

我在按钮列表中使用了一个单独的数据属性，即数据目标，它引用了整个列表对应的目标选择框。然后，受到Tyddlywink的JSFIDLE的启发，我所要做的就是简单地

function changeOption(O) {
    $(document.getElementsByName(O.dataset.target)).val(O.dataset.value).trigger('change');
}

可在此处找到一个工作示例：

---

感谢所有在我寻找灵感时花时间写下答案的人

你的密码在哪里？你试过什么？为什么你认为你可以在选项标签中有一个可链接的图标？众所周知，选项标记很难设置样式，因为它们通常由浏览器/操作系统呈现。在移动设备上，您如何看待这一点？在移动设备上，选择通常会在选择时呈现出正常流程之外的效果。如果“选择”是您真正想要的，那么使用标签激活隐藏的按钮/框，单选按钮或复选框的样式列表是否会更好。请提供一个最小的、可复制的示例：感谢您对我的问题感兴趣。我将用这些更改更新原始帖子。您的实时示例包含约6900行代码。请提供

---

为你想要达到的目标设计一个更简单的版本。查看源代码，它包含了这么多行代码，因为它包含了popover代码，即每个选择框的API响应。不管怎样，我对这部分进行了注释，所以它减少到了300行以下。现在，重要的代码在第71、85、99行等等。。。为了回答您的其他问题，每次选择一个选项时，都会触发一个onchange事件来提交表单，以便填充/更新下一个选择框。你看，整个项目就像一个循序渐进的产品配置程序，每个选项都会影响下一个选项的可用选项。