javascript - 在选择/组合框中同时包含文本和 href 链接

Question

我已阅读Links in dropdown options和 using href links inside tag以及 SO 中的其他几个问题，但是我的问题有点不同。

我想在选择组合框中同时包含文本和href。 类似的东西

<select id="mySelect">    
    <option value="-1" selected>choose an option to test</option>    
    <option value="1">Book 1 <a href="http://example.com/23?id=12">open site</a></option>    
    <option value="2">Book 2 <a href="http://example.com/11?id=10">open site</a></option> 
</select>

这个想法是，用户可以从组合框中进行选择，但也可以通过单击 open site 转到外部站点在选择书籍之前查看书籍。

即:点击左侧的<option>是常规选择，同时单击<option>右侧会将用户带到另一个页面

这可能吗？运行代码要么完全忽略 href 要么提示 Warning: validateDOMNesting(...): <a> cannot appear as a child of <option>.

Answer 1

Is that possible?

不使用<a>元素作为 <option> 的子元素元素; <a>元素不是 HTML <option> 的有效子节点元素。

Permitted content Text, possibly with escaped characters (like é).

您可以在元素data-*处设置URL属性并导航至 URL change事件<select>元素

document.getElementById("mySelect")
.onchange = function() {
   var url = this.selectedOptions[0].dataset.href;
   if (url && confirm("Navigate to " + url + "?")) {
     location.href = url;
   }
}

:target {
  color: blue;
}

<select id="mySelect">    
    <option value="-1" selected>choose an option to test</option>    
    <option value="1" data-href="#Book1">Book 1 </option>    
    <option value="2" data-href="#Book2">Book 2 </option> 
</select>

<div id="Book1">Book 1</div>
<div id="Book2">Book 2</div>