Łączenie z inną stroną opartą na opcji datalist - javascript, jquery, html, html-datalist

Teraz mam datalistę z kilkoma opcjami i mamchcę link do innej strony, gdy jedna z nich jest wybrana. Poniżej moja pierwsza próba, w której próbowałem bezpośrednio dodać hiperłącze do etykiety opcji. Ale to nie działało.

    <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>

Następnie próbowałem również określić zdarzenie onclick dla każdej opcji i odpowiednio przeskoczyć na inną stronę, ale nadal się nie udało. Czy można to osiągnąć za pomocą datalist?

Odpowiedzi:

Oto jak bym to zrobił:

$(document).ready(function() {
$("[list="my-list"]").on("input propertychange", function() {
window.location = $("#my-list option[value=""+$("[list="my-list"]").val()+""]").find("a").attr("href")
});
});

Tutaj jest CodePen próbny

Zauważ, że strona jest pusta po przekierowaniu, ponieważ SO nie zezwala na pochodzenie między domenami. Sprawdź konsolę, aby zobaczyć próbę przekierowania.