在select / combo-box

Question

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

我想在select组合框中包含两个文本和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

  

这可能吗？

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

  

允许的内容文字，可能包含转义字符（例如é）。

您可以在元素data-*属性中设置网址，然后导航到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>

Answer 2

您可以使用Fit.UI的下拉控件。显示值可能包含HTML元素，例如链接。

http://fitui.org/Control-DropDown.html