<select> <option>旁边的可链接图标

Question

我正在使用一个API，该API返回一些打印产品配置。配置分组在选择框中，每个都有不同的选项。对于某些选项，有一个特殊的外部链接，例如内容丰富的视频等。

您可以通过以下两张图片了解接口以及我从API获得的XML数据：

如您所见，可能存在一个视频链接，其中包含同一选择框的两个或多个选项。如果不是这种情况，我将存储链接并将其显示在手风琴标题旁边。但是，由于可能存在多个选项的链接，因此从UX的角度来看，每个链接都必须位于其选项附近（界面图像中的红色和绿色箭头）。

到目前为止，我发现了一些显示图标的技术（使用我测试过的甚至不起作用的属性data-icon。但是即使它起作用了，它也只会显示一个图标，而我需要的是该图标还可以链接到外部站点...

我知道这很难实现，尤其是因为图标将位于标签内...

因此，我正在考虑一个图标，该图标将以某种方式在适当的选项旁边对齐？！？

但是我想不出任何办法。任何帮助将不胜感激。 TIA。

编辑：我忘了提一下，尽管界面看上去不像选择框，但实际上它们是选择框，其大小属性设置为每个选项的数量。然后使用一些jQuery，将所选值的标题添加到手风琴的标题中。这就是我制作您看到的界面的方式。

EDIT2：您可以在这里看到我的问题：

在界面中，右侧的代码图标显示了该特定选择框的API响应，因为它正在进行中，因此我需要研究很多响应。

因此，如果单击a_paper选择框的代码图标，则会看到API返回了有关所有可用选项中的7个的信息性视频（externalLinks XML标记）。

Answer 1

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

然后，通过单选按钮的名称仍然具有表单元素。

//This is a better way to wire up your event handler
//instead of inline javascript
var radios = document.querySelectorAll(".selctRadio input[type=radio]");
for(i = 0; i < radios.length; i++)
{
  radios[i].addEventListener("click", submitForm);
}

//Just to demo the handler, put/change your logic here
function submitForm(){
  console.log(this.name + " : " + this.value);
}

/*Style the list*/
.selctRadio {
  list-style: none;
  padding-left: 0;
}

/*Hide the radio button*/
.selctRadio input[type=radio] {
  display: none;
}

/*Style the select*/
.selctRadio label {
  display: block;
}

/*Add some styling when checked*/
.selctRadio input[type=radio]:checked~label {
  background-color: #CCC;
}

/*Set the list item to relative*/
.selctRadio {position:relative;}

/*So we can absolutely position the icon relative to it*/
.selctRadio .fa-film{
  position:absolute;
  right:0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<p>Pay
<i class="fa fa-apple-pay"></i>
</p>
<div class="card">
  <div class="card-header" id="heading67765">
    <h2 class="mb-0">
      <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse67765" aria-expanded="true" aria-controls="collapse67765">
          a_format
        <strong>210 x 75 mm</strong></button>
      <span class="fa fa-code pull-right" data-container="body" data-toggle="popover" data-placement="left" data-html="true" data-content="" style="font-size: 16pt; margin-top: 10px;" data-original-title="" title=""></span>
    </h2>
  </div>
  <div id="collapse67765" class="show*********** collapse show" aria-labelledby="heading67765" data-parent="#accordionExample" style="">
    <div class="card-body">
      <ul class="selctRadio">
        <!-- Note the relationship between "id" on the input and "for" on the label -->
        <li><input type="radio" name="a_format" value="A_52_x_74_mm_DIN-A-8" id="A_52_x_74_mm_DIN-A-8"><label for="A_52_x_74_mm_DIN-A-8">52 x 74 mm A8</label></li>
        <li><input type="radio" name="a_format" value="A_74_x_105_mm_DIN-A-7" id="A_74_x_105_mm_DIN-A-7"><label for="A_74_x_105_mm_DIN-A-7">74 x 105 mm A7</label>
</li>
        <li><input type="radio" name="a_format" value="A_210_x_75_mm" id="A_210_x_75_mm" checked><label for="A_210_x_75_mm">210 x 75 mm</label></li>
      </ul>
    </div>
  </div>
</div>
<div class="card">
  <div class="card-header" id="heading67765">
    <h2 class="mb-0">
      <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse67765" aria-expanded="true" aria-controls="collapse67765">
          a_format
        <strong>210 x 75 mm</strong></button>
      <span class="fa fa-code pull-right" data-container="body" data-toggle="popover" data-placement="left" data-html="true" data-content="" style="font-size: 16pt; margin-top: 10px;" data-original-title="" title=""></span>
    </h2>
  </div>
  <div id="collapse67765" class="show*********** collapse show" aria-labelledby="heading67765" data-parent="#accordionExample" style="">
    <div class="card-body">
    
      <ul class="selctRadio">
        <li><input type="radio" name="a_paper" value="A_90gqm_Bilderdruck" id="A_90gqm_Bilderdruck"><label for="A_90gqm_Bilderdruck">90 gsm Coated art paper</label></li>
        <li><input type="radio" name="a_paper" value="A_115gqm_Bilderdruck" id="A_115gqm_Bilderdruck"><label for="A_115gqm_Bilderdruck">115 gsm Coated art paper</label><a href="https://www.youtube.com" class="fa fa-film"></a></li>
        <li><input type="radio" name="a_paper" value="A_130gqm_Bilderdruck" id="A_130gqm_Bilderdruck"><label for="A_130gqm_Bilderdruck">130 gsm Coated art paper</label></li>
      </ul>    
    </div>
  </div>
</div>

Answer 2

好的，我重新设计了此样式，并使用了按钮列表而不是选择框。当然，我保留了用于提交表单的选择框，但我将它们隐藏了。

由于我想保留原始的JS，所以选择框的onChange会按选择顺序处理“间隙”（即，在第4个框上进行选择后，直接变为第6个，而第5个为空），我遵循这种方法：

我在按钮列表中使用了单独的data属性，即data-target，它引用了整个列表所对应的目标选择框。然后，受Tyddlywink的JSfiddle的启发，我只需要做一个

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

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

感谢我在寻找灵感时花了一些时间写答案的每个人！