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

Question

我现在有一个带有几个选项的数据列表，当其中一个选项被选择时，我想链接到其他页面。 以下是我的第一次尝试，在此尝试直接将超链接添加到选项标签中。但似乎没有起作用。

    <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")
  });
});

这里是 CodePen 演示

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

- Ahs N

---

感谢您的解决方案！您的解决方案基本上满足了我的要求，但我希望在选择选项时立即触发重定向；而在您提供的解决方案中，页面直到输入“焦点离开”才会被重定向。那么有没有更好的方法来解决这个问题呢？ - 赣西狠人

是的，这是可能的。我更改了它的事件绑定以使其工作，并为您更新了代码和Codepen演示链接 :) - Ahs N

非常感谢！我已经尝试了你的演示，它确实解决了上述问题。然而，由于使用了输入事件，现在每次输入值更改时都会触发重定向，而我的最初想法是仅在单击某个选项时才进行重定向，这就是为什么我尝试使用单击事件的原因。 无论如何，多亏了你的解决方案，我现在想到了一种新方法，即检查输入值是否与选项匹配，并仅在它们匹配时触发重定向。 - 赣西狠人

@Shiying 如果这是您的要求，那么这正是需要做的。过滤输入，并检查它是否与预定义列表中的项目匹配，如果匹配，则相应地进行重定向。希望能对您有所帮助 :) - Ahs N

链接无法打开，请检查CodePen的链接 @Ahs N - Alabi Temitope

@AhsN，如果我们在输入框中输入任何内容，它也会重定向。 - user9437856