データリストオプションに基づいて他のページにリンクする

Question

データリストにはいくつかのオプションがあり、そのうちの1つが選択されたときに別のページにリンクしたいと思います。 以下は、私が最初に試みたもので、オプションラベルにハイパーリンクを直接追加しようとしました。しかし、それはうまくいかないようでした。

<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イベントを指定して、それに応じて他のページにジャンプしようとしましたが、それでも失敗しました。 データリストを使用してこれを達成することは可能ですか？

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クロスドメインの起源を許可していないため、ページがリダイレクト後に空白であること。リダイレクトの試みを確認するには、コンソールを確認してください。