根据数据列表选项链接到其他页面

Question

现在我有一个包含几个选项的数据列表，我想在选择其中一个时 link 转到其他页面。下面是我的第一次尝试，我尝试直接在选项标签中添加一个 hyper link 。但是好像没有用。

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

然后我也试过指定每个选项的onclick事件，并据此跳转到其他页面，但还是失败了。那么是否可以使用数据列表来实现这一点？

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 不允许跨域来源。检查您的控制台以查看重定向尝试。

根据数据列表选项链接到其他页面

Linking to other page based on datalist option

html

javascript

jquery

html-datalist