僅通過CSS3 + HTML5添加超鏈接到Datalist

我想添加超鏈接到數據列表，以便當用戶選擇數據列表中的其中一個項目時，它會將它們帶到HTML頁面中？我正在尋找最簡單的解決方案。有沒有辦法只用CSS3 + HTML5做到這一點？ jQuery將是我的選擇。僅通過CSS3 + HTML5添加超鏈接到Datalist

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 

<input type="text" name="srch" id="srch" list="datalist1"> 
<datalist id="datalist1"> 
    <option value="Canada"> 
    <option value="China"> 
    <option value="Mexico"> 
    <option value="United Kingdom"> 
    <option value="United States of America"> 
    <option value="Uruguay"> 
</datalist> 
</body> 
</html>

來源

2017-03-22 Chip

您應該考慮到這個HTML控件不是在所有的瀏覽器都支持，併爲您的期望的使用，我建議使用一個自動完成插件，你需要使用Javascript –

這是不可能與沒有javascript，但它很容易做，尤其是與jQuery的。 Here'a它如何可以工作一個小例子：

$('#srch').on('input', function(){ 
    var page = $(this).val(); 
    window.location.href = 'your url' + page; 
});

來源

2017-03-22 19:14:49

感謝您的推薦頁面。我想我的jQuery是相當有限的。所以，如果我想要每個選項去不同的HTML頁面，代碼將看起來像這樣...？（'#srch'）。on（'input'，function（）{ var page = $（Canada）.val（）; window.location.href ='canada.html'+ page; }） ; – Chip

僅通過CSS3 + HTML5添加超鏈接到Datalist

回答

相關問題