Question

现在我有一个带有几个选项的datalist，我想在选择其中一个时链接到其他页面。下面是我的第一次尝试，我尝试直接向选项标签添加超链接。但它似乎没有用。

    <input type="text" name="my-input" list="my-list">
    <datalist id="my-list">
    <option value="a"><a href="http://stackoverflow.com/questions"></a>a</option>
    <option value="b"><a href="http://stackoverflow.com/questions"></a>b</option>
    <option value="c"><a href="http://stackoverflow.com/questions"></a>c</option>
    </datalist>

然后我还尝试指定每个选项的onclick事件，并相应地跳转到其他页面，但仍然失败。那么使用datalist可以实现这个目标吗？

Answer 1

我就是这样做的：

$(document).ready(function() {
  $("[list='my-list']").on("input propertychange", function() {
    window.location = $("#my-list option[value='"+$("[list='my-list']").val()+"']").find("a").attr("href")
  });
});

Here is the CodePen demo

请注意，重定向后页面为空白，因为SO不允许跨域来源。检查您的控制台以查看重定向尝试。

基于datalist选项链接到其他页面

1 个答案: