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

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'+ 페이지; }) ; – Chip

CSS3 + HTML5만으로 Datalist에 하이퍼 링크 추가하기

답변

관련 문제