基於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選項連接到其他頁面

回答

相關問題