データリストにハイパーリンクをCSS3 + HTML5のみで追加する

データリストにハイパーリンクを追加して、データリスト内のアイテムの1つを選択したときにHTMLページにリンクするようにしたいのですが？私は可能な最も簡単な解決策を探しています。 CSS3 + HTML5だけでこれを行う方法はありますか？ jQueryは私の選択肢になります。データリストにハイパーリンクをCSS3 + HTML5のみで追加する

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

Javascript –

これはjavascriptなしではできませんが、特にjqueryで行うのは簡単です。 Here'aそれは仕事ができるかの小さな例：

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

あなたは、このHTMLコントロールは、すべてのブラウザでサポートされていない、と私はオートコンプリートのプラグインを使用することをお勧めします、ご希望の使用のために、あなたが使用する必要があることを考慮すべきである

出典

2017-03-22 19:14:49

あなたのお勧めのページをありがとう。私のjQueryはかなり限られていると思います。ですから、各オプションを別のhtmlページに移動したければ、コードは次のようになります...？ $（ '＃srch'）。on（ 'input'、function（）{ var page = $（カナダ）.val（）; window.location.href = 'canada.html' + page; }） ; – Chip

データリストにハイパーリンクをCSS3 + HTML5のみで追加する

答えて

関連する問題