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

现在我有一个有几个选项的数据列表，当我选择其中一个选项时，我想链接到其他页面。以下是我的第一次尝试，我试图直接将超链接添加到选项标签。但它似乎没有工作。基于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来实现这个功能吗？

来源

2017-04-14 辽北狠人

这是我会怎么做：

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

来源

2017-04-14 08:26:07

感谢您的解决方案！您的解决方案基本满足我的要求，但我希望选择该选项后立即触发重定向;而在您提供的解决方案中，该页面不会被定向，直到输入被“聚焦”为止。那么有没有更好的方法来做到这一点？ –

是的，这是可能的。我更改了它的事件绑定工作并更新了代码和Codepen演示链接:) –

非常感谢！我试过了你的演示，它确实解决了上述问题。但是，由于使用了输入事件，每次输入值改变时都会触发重定向，而我最初的想法是仅当某些选项被“点击”时才重定向，这就是为什么我尝试使用click事件。无论如何，感谢您的解决方案，我现在想出了一种新方法，即检查输入值是否与选项匹配，并仅在匹配时触发重定向。 –

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

回答

相关问题