根据数据列表选项链接到其他页面 [英] Linking to other page based on datalist option

问题描述

Now I have a datalist with a few options, and I want to link to other page when one of them is selected.以下是我的第一次尝试，其中我尝试直接向选项标签添加超级链接.但这似乎没有用.

Now I have a datalist with a few options, and I want to link to other page when one of them is selected. Below is my first attempt, in which I tried to directly add a hyper link to the option label. But it did not seem to work.

    <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事件，并相应地跳转到其他页面，但仍然失败.那么可以使用数据列表来实现这一点吗?

Then I also tried to specify the onclick event of each option, and jump to other page accordingly, but still failed. So is it possible to achieve this using datalist?

推荐答案

这就是我要这样做的方式:

This is how I would do it:

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

Note that the page is blank after redirect because SO does not allow cross domain origin. Check your console to see the redirect attempt.

这篇关于根据数据列表选项链接到其他页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！